/* Website section of Project settings and its file review dialog. Cards, facts,
   progress and evidence rows reuse the Environment section classes in modals.css. */

.project-setup-row-icon.is-website {
  color: #8fb4f0;
  background: rgb(88 128 204 / 0.11);
}

.website-hosting-view {
  display: grid;
  gap: 18px;
}

.website-hosting-view .developer-environment-card {
  margin-bottom: 0;
}

.website-hosting-view .action-button.small,
.website-review-dialog .action-button.small {
  padding: 6px 11px;
  font-size: 11px;
}

.website-hosting-view .action-button.primary:not(.small),
.website-review-footer .action-button {
  padding: 9px 15px;
  font-size: 12px;
}

.website-notice {
  padding: 8px 10px;
  border: 1px solid rgb(79 189 129 / 0.22);
  border-radius: 9px;
  color: var(--ink);
  background: rgb(79 189 129 / 0.07);
  font-size: 11px;
}

.website-empty {
  display: grid;
  gap: 6px;
  padding: 28px 22px;
  border: 1px solid var(--border-subtle);
  border-radius: 13px;
  background: var(--surface-card-strong);
}

.website-empty h3,
.website-empty p {
  margin: 0;
}

.website-empty h3 {
  font-size: 13px;
  font-weight: 600;
}

.website-empty p,
.website-quiet,
.website-hosting-view [data-website-loading] {
  margin: 0;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.5;
}

.website-actions {
  flex-wrap: wrap;
  gap: 8px;
}

/* The site's path: 1 review site and 2 live site side by side, then 3 the custom domain.
   The numbered marks carry the sequence; the chevron between 1 and 2 shows that a
   reviewed version moves to the live site. */
.website-stages {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr);
  gap: 5px;
  align-items: stretch;
}

.website-stage-arrow {
  align-self: start;
  margin-top: 29px;
  color: var(--ink-muted);
}

.website-stage-arrow svg {
  display: block;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.website-hosting-view .website-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.website-hosting-view .website-stage > .developer-environment-actions {
  flex-wrap: wrap;
  gap: 8px;
}

.website-hosting-view .website-stage.is-quiet {
  border-style: dashed;
  border-color: var(--border-subtle);
  background: var(--surface-card-strong);
  box-shadow: none;
}

.website-stage-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgb(var(--project-accent-rgb, var(--mint-rgb)) / 0.42);
  border-radius: 50%;
  color: var(--ink);
  background: rgb(var(--project-accent-rgb, var(--mint-rgb)) / 0.12);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.website-stage.is-quiet .website-stage-mark {
  border-color: var(--border-subtle);
  color: var(--ink-soft);
  background: var(--surface-control);
}

.website-hosting-view .website-stage-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.website-actions-quiet {
  display: inline-flex;
  gap: 2px;
  margin-left: auto;
}

.website-actions-quiet:empty {
  display: none;
}

.website-promote {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 10px 12px;
  border: 1px solid rgb(79 189 129 / 0.32);
  border-radius: 10px;
  background: rgb(79 189 129 / 0.07);
}

.website-promote > div {
  display: grid;
  flex: 1 1 150px;
  gap: 2px;
  min-width: 0;
}

.website-promote strong {
  font-size: 11px;
}

.website-promote small {
  color: var(--ink-soft);
  font-size: 10px;
}

.website-promote .action-button {
  flex: none;
}

.website-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.website-setup-actions {
  flex-wrap: wrap;
}

.website-setup-options summary {
  width: fit-content;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 11px;
}

.website-setup-options[open] summary {
  margin-bottom: 10px;
}

.website-field-help {
  grid-column: 1 / -1;
  margin-top: -4px;
  color: var(--ink-muted);
  font-size: 10px;
}

.website-settings-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.website-settings-wide {
  grid-column: 1 / -1;
}

.website-settings-fields label,
.website-link-form label,
.website-studio-picker label,
.website-review-site label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.website-settings-fields label > span,
.website-link-form label > span,
.website-studio-picker label > span,
.website-review-site label > span:first-child {
  color: var(--ink-muted);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.website-settings-fields em {
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
}

.website-hosting-view :is(input[type="text"], select, textarea),
.website-review-dialog input[type="text"] {
  min-width: 0;
  min-height: 33px;
  padding: 7px 9px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  color: var(--ink);
  background: var(--surface-control);
  font: inherit;
  font-size: 11px;
}

.website-hosting-view textarea {
  min-height: 58px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.website-existing > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 12px;
  padding: 10px 11px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
}

.website-existing small {
  grid-column: 1;
  color: var(--ink-soft);
  font-size: 10px;
}

.website-existing button {
  grid-row: 1 / span 2;
  grid-column: 2;
}

.website-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 9px 13px;
  border-bottom: 1px solid var(--border-subtle);
}

.website-row:last-child {
  border-bottom: 0;
}

.website-row-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.website-row-copy strong {
  overflow: hidden;
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.website-row-copy small {
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.website-row-actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.website-links .website-row,
.website-production .website-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.website-version-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.website-version.is-rejected .website-row-copy strong {
  color: var(--danger-text);
}

.website-version-badges {
  display: inline-flex;
  gap: 5px;
}

.website-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
}

.website-badge.is-review {
  border-color: rgb(55 143 184 / 0.32);
  color: #8ccbe6;
}

.website-badge.is-production {
  border-color: rgb(79 189 129 / 0.34);
  color: #7fd3a5;
}

.website-badge.is-rejected,
.website-badge.is-failed {
  border-color: rgb(217 111 98 / 0.34);
  color: var(--danger-text);
}

.website-badge.is-new {
  margin-left: 4px;
  border-color: rgb(190 143 49 / 0.36);
  color: #dcb969;
}

.website-findings {
  display: grid;
  gap: 3px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: 10px;
}

.website-findings code,
.website-review-dialog code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  overflow-wrap: anywhere;
}

.website-findings span {
  color: var(--ink-soft);
}

.website-findings em {
  color: var(--ink-muted);
  font-style: normal;
}

.website-rejected > div {
  min-width: 0;
}

.website-confirm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgb(var(--project-accent-rgb, var(--mint-rgb)) / 0.34);
  border-radius: 10px;
  background: rgb(var(--project-accent-rgb, var(--mint-rgb)) / 0.07);
}

.website-confirm > div:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.website-confirm strong {
  font-size: 11px;
}

.website-confirm small {
  color: var(--ink-soft);
  font-size: 10px;
}

.website-confirm > div:last-child {
  display: inline-flex;
  flex: none;
  gap: 6px;
}

.website-confirm-row {
  padding: 8px 13px;
  border-bottom: 1px solid var(--border-subtle);
}

.website-link-form,
.website-studio-picker {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
}

.website-studio-picker {
  grid-template-columns: minmax(0, 1fr) auto;
}

.website-link-form > div,
.website-studio-picker > div {
  display: inline-flex;
  gap: 6px;
}

.website-settings summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 28px;
  cursor: pointer;
  list-style: none;
}

.website-settings summary::-webkit-details-marker {
  display: none;
}

.website-settings summary h3 {
  font-size: 12px;
  font-weight: 600;
}

.website-settings summary h3::before {
  content: "›";
  display: inline-block;
  margin-right: 7px;
  color: var(--ink-muted);
  transition: transform 140ms ease;
}

.website-settings[open] summary h3::before {
  transform: rotate(90deg);
}

.website-settings summary span {
  color: var(--ink-muted);
  font-size: 10px;
}

.website-settings .developer-environment-actions {
  margin-top: 4px;
}

/* File review dialog */
.website-review-dialog {
  width: min(820px, calc(100vw - 48px));
  gap: 12px;
}

.website-review-dialog[open] {
  gap: 12px;
}

.website-review-site {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
}

.website-slug {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.website-slug input {
  width: 220px;
}

.website-slug em {
  color: var(--ink-soft);
  font-style: normal;
  font-size: 12px;
}

.website-review-site small {
  color: var(--ink-soft);
  font-size: 11px;
}

.website-review-summary {
  display: grid;
  gap: 2px;
}

.website-review-summary small {
  color: var(--ink-soft);
  font-size: 12px;
}

.website-review-warning {
  padding: 9px 11px;
  border: 1px solid rgb(190 143 49 / 0.3);
  border-radius: 9px;
  background: rgb(190 143 49 / 0.07);
  font-size: 12px;
}

.website-review-warning.is-danger {
  border-color: rgb(217 111 98 / 0.32);
  background: rgb(217 111 98 / 0.07);
}

.website-review-warning ul,
.website-review-dialog .project-setup-inline-error ul {
  margin: 4px 0 0;
  padding-left: 16px;
}

.website-review-warning small {
  color: var(--ink-soft);
}

.website-review-body {
  max-height: 46vh;
}

.website-review-files legend small {
  display: block;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 400;
}

.website-review-files label {
  align-items: center;
  padding: 7px 0;
}

.website-review-files label code {
  font-size: 12px;
}

.website-review-excluded summary {
  padding: 8px 0;
  color: var(--ink-soft);
  cursor: pointer;
}

.website-review-excluded ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.website-review-excluded li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  border-top: 1px solid var(--line);
}

.website-review-excluded li span {
  color: var(--ink-soft);
  font-size: 11px;
}

.website-review-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.website-review-footer .repository-message {
  flex: 1;
  margin: 0;
}

/* Inside a half-width stage card the link form takes two rows. */
.website-stage .website-link-form {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
}

.website-stage .website-link-form > div {
  grid-column: 1 / -1;
}

@media (max-width: 980px) {
  .website-stages {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .website-stage-arrow {
    display: none;
  }
}

@media (max-width: 760px) {
  .website-settings-fields,
  .website-link-form,
  .website-stage .website-link-form {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Custom domain card: one guided path from typing a domain to it being live. The
   steps, the record table and the current step's callout carry the state; color
   only reinforces the words (Found, Waiting, Check). */
.website-domain-card.is-quiet {
  border-color: var(--border-subtle);
  background: var(--surface-card-strong);
}

/* A live domain's address must stay readable in full, so its facts wrap. */
.website-domain-card .developer-environment-facts > div {
  align-content: start;
}

.website-domain-card .developer-environment-facts strong {
  overflow-wrap: anywhere;
  white-space: normal;
}

.website-domain-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.website-domain-form label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.website-domain-form label > span {
  color: var(--ink-muted);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.website-hosting-view .website-domain-form input[type="text"] {
  min-height: 36px;
  font-size: 12px;
}

.website-hosting-view .website-domain-form .action-button.primary {
  min-height: 36px;
}

.website-domain-suggestion,
.website-domain-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 10.5px;
  line-height: 1.5;
}

.website-domain-suggestion {
  border: 1px solid rgb(190 143 49 / 0.34);
  background: rgb(190 143 49 / 0.07);
}

.website-domain-suggestion > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.website-domain-suggestion strong {
  font-size: 11px;
}

.website-domain-suggestion small,
.website-domain-note {
  color: var(--ink-soft);
}

.website-domain-note {
  border: 1px dashed var(--border-subtle);
}

.website-domain-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  list-style: none;
}

.website-domain-steps li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  padding: 10px 11px;
  border-right: 1px solid var(--border-subtle);
}

.website-domain-steps li:last-child {
  border-right: 0;
}

.website-domain-steps li > span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 600;
}

.website-domain-steps li > div {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.website-domain-steps strong {
  font-size: 11px;
  font-weight: 600;
}

.website-domain-steps small {
  color: var(--ink-soft);
  font-size: 9.5px;
}

.website-domain-steps li.is-upcoming strong {
  color: var(--ink-soft);
}

.website-domain-steps li.is-done > span {
  border-color: rgb(79 189 129 / 0.4);
  color: #78d39f;
  background: rgb(79 189 129 / 0.12);
}

.website-domain-steps li.is-active {
  background: rgb(var(--project-accent-rgb, var(--mint-rgb)) / 0.07);
}

.website-domain-steps li.is-active > span {
  border-color: rgb(var(--project-accent-rgb, var(--mint-rgb)) / 0.6);
  color: var(--ink);
  background: rgb(var(--project-accent-rgb, var(--mint-rgb)) / 0.16);
}

.website-domain-callout {
  display: grid;
  gap: 3px;
  padding: 11px 12px;
  border: 1px solid rgb(var(--project-accent-rgb, var(--mint-rgb)) / 0.3);
  border-radius: 10px;
  background: rgb(var(--project-accent-rgb, var(--mint-rgb)) / 0.06);
}

.website-domain-callout strong {
  font-size: 12px;
  overflow-wrap: anywhere;
}

.website-domain-callout small {
  color: var(--ink-soft);
  font-size: 10.5px;
  line-height: 1.5;
}

.website-domain-callout.is-payment,
.website-domain-callout.is-activating {
  border-color: rgb(79 189 129 / 0.36);
  background: rgb(79 189 129 / 0.07);
}

.website-domain-callout-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.website-domain-problems {
  padding: 10px 12px;
  border: 1px solid rgb(217 111 98 / 0.3);
  border-radius: 10px;
  background: rgb(217 111 98 / 0.06);
  font-size: 11px;
}

.website-domain-problems ul {
  display: grid;
  gap: 3px;
  margin: 4px 0 0;
  padding-left: 16px;
  color: var(--ink-soft);
  line-height: 1.5;
}

.website-domain-records {
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
}

.website-domain-records-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.website-domain-records-head strong {
  font-size: 11px;
}

.website-domain-records-head small {
  color: var(--ink-soft);
  font-size: 10px;
}

.website-domain-records table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 10.5px;
}

.website-domain-records th {
  padding: 7px 12px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--ink-muted);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
}

.website-domain-records th:nth-child(1) {
  width: 82px;
}

.website-domain-records th:nth-child(2) {
  width: 58px;
}

.website-domain-records th:nth-child(3) {
  width: 34%;
}

.website-domain-records td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}

.website-domain-records tr:last-child td {
  border-bottom: 0;
}

.website-domain-records td > small {
  display: block;
  margin-top: 3px;
  color: var(--ink-muted);
  font-size: 9px;
  overflow-wrap: anywhere;
}

.website-domain-records > .website-quiet {
  padding: 8px 12px;
  border-top: 1px solid var(--border-subtle);
}

.website-record-value {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.website-record-value code {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.website-copy {
  flex: none;
  padding: 2px 7px;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  color: var(--ink-soft);
  background: transparent;
  font: inherit;
  font-size: 9.5px;
  cursor: pointer;
}

.website-copy:hover {
  border-color: var(--line);
  color: var(--ink);
}

.website-copy:focus-visible {
  outline: 2px solid rgb(var(--project-accent-rgb, var(--mint-rgb)) / 0.7);
  outline-offset: 1px;
}

.website-record-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.website-record-status::before {
  content: "";
  width: 7px;
  height: 7px;
  box-sizing: border-box;
  border-radius: 50%;
}

.website-record-status.is-ok {
  color: #78d39f;
}

.website-record-status.is-ok::before {
  background: #4fbd81;
}

.website-record-status.is-waiting {
  color: var(--ink-soft);
}

.website-record-status.is-waiting::before {
  border: 1.5px solid currentColor;
}

.website-record-status.is-problem {
  color: var(--danger-text);
}

.website-record-status.is-problem::before {
  background: #d96f62;
}

.website-domain-help summary {
  color: var(--ink-soft);
  font-size: 11px;
  cursor: pointer;
}

.website-domain-help p {
  margin: 8px 0;
  color: var(--ink-soft);
  font-size: 10.5px;
}

.website-domain-help dl {
  display: grid;
  gap: 6px;
  margin: 0;
}

.website-domain-help dl > div {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 10px;
  font-size: 10.5px;
  line-height: 1.5;
}

.website-domain-help dt {
  font-weight: 600;
}

.website-domain-help dd {
  margin: 0;
  color: var(--ink-soft);
}

.website-domain-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.website-domain-footer > small {
  color: var(--ink-soft);
  font-size: 10px;
}

.website-domain-footer > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 760px) {
  .website-domain-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .website-domain-steps li {
    border-right: 0;
    border-bottom: 1px solid var(--border-subtle);
  }

  .website-domain-steps li:last-child {
    border-bottom: 0;
  }

  .website-domain-help dl > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* Site hero: the site itself first. A browser window shows its address and its share image
   (or its name), beside its status, address and the ways to open and share it. This is the
   page's one bold element; the steps below stay quiet. */
.website-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: center;
  gap: 26px;
  padding: 20px;
  border: 1px solid rgb(var(--project-accent-rgb, var(--mint-rgb)) / 0.3);
  border-radius: 16px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgb(var(--project-accent-rgb, var(--mint-rgb)) / 0.12), transparent 58%),
    var(--surface-card-strong);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04), 0 18px 40px rgb(0 0 0 / 0.08);
}

.website-browser {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: 11px;
  background: var(--surface-control);
  box-shadow: 0 14px 34px rgb(0 0 0 / 0.22), 0 2px 6px rgb(0 0 0 / 0.12);
}

.website-browser-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 30px;
  padding: 0 10px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-control);
}

.website-browser-dots {
  display: inline-flex;
  flex: none;
  gap: 5px;
}

.website-browser-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-muted, var(--ink-soft));
  opacity: 0.4;
}

.website-browser-address {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 20px;
  padding: 0 9px;
  border-radius: 6px;
  color: var(--ink-soft);
  background: var(--surface-card-strong);
  font-size: 10.5px;
}

.website-browser-address > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.website-lock {
  flex: none;
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.website-browser-page {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface-card-strong);
}

.website-browser-page > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.website-browser-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 7px;
  padding: 20px 26px;
  text-align: center;
  background:
    radial-gradient(90% 90% at 50% 0%, rgb(var(--project-accent-rgb, var(--mint-rgb)) / 0.22), transparent 70%),
    linear-gradient(180deg, transparent, rgb(var(--project-accent-rgb, var(--mint-rgb)) / 0.08));
}

.website-browser-placeholder.is-loading {
  background: linear-gradient(110deg, transparent 30%, rgb(var(--project-accent-rgb, var(--mint-rgb)) / 0.1) 50%, transparent 70%) 0 0 / 220% 100%;
  animation: website-preview-loading 1.6s ease-in-out infinite;
}

@keyframes website-preview-loading {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .website-browser-placeholder.is-loading {
    animation: none;
  }
}

.website-browser-mark {
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 44px;
  height: 44px;
  border: 1px solid rgb(var(--project-accent-rgb, var(--mint-rgb)) / 0.36);
  border-radius: 12px;
  color: var(--ink);
  background: rgb(var(--project-accent-rgb, var(--mint-rgb)) / 0.16);
  font-size: 20px;
  font-weight: 600;
}

.website-browser-mark img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.website-browser-placeholder strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.website-browser-placeholder small {
  display: -webkit-box;
  overflow: hidden;
  max-width: 34ch;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.website-hero-copy {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 8px;
  min-width: 0;
}

.website-hero-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 600;
}

.website-hero-status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-muted, var(--ink-soft));
}

.website-hero-status.is-public i {
  background: #4fbd81;
  box-shadow: 0 0 0 3px rgb(79 189 129 / 0.18);
}

.website-hero-status.is-private i,
.website-hero-status.is-review i {
  background: #8fb4f0;
  box-shadow: 0 0 0 3px rgb(143 180 240 / 0.16);
}

.website-hero-copy h3 {
  max-width: 100%;
  margin: 0;
  color: var(--ink);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  overflow-wrap: anywhere;
  user-select: text;
}

.website-hero-copy > p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 11.5px;
  line-height: 1.55;
}

.website-hero-updated {
  color: var(--ink-muted, var(--ink-soft));
}

.website-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.website-hero-copy .website-link-form {
  width: 100%;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.website-hero-copy .website-link-form > label:first-child,
.website-hero-copy .website-link-form > div {
  grid-column: 1 / -1;
}

/* Addresses: a pill that reads like a browser's address field. */
.website-address-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 26px;
  padding: 0 11px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  color: var(--ink);
  background: var(--surface-control);
  font-size: 11.5px;
  font-weight: 600;
}

.website-address-pill > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.website-setup-address {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}

.website-setup-address small {
  color: var(--ink-soft);
  font-size: 10.5px;
}

.website-setup-actions small {
  flex-basis: 100%;
}

/* The custom domain upsell: your free address becomes your own domain. */
.website-address-upgrade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background:
    linear-gradient(90deg, transparent 40%, rgb(var(--project-accent-rgb, var(--mint-rgb)) / 0.08)),
    var(--surface-control);
}

.website-address {
  display: grid;
  justify-items: start;
  gap: 5px;
  min-width: 0;
}

.website-address small {
  color: var(--ink-soft);
  font-size: 10px;
}

.website-address.is-free .website-address-pill {
  color: var(--ink-soft);
  font-weight: 500;
}

.website-address.is-own .website-address-pill {
  border-color: rgb(var(--project-accent-rgb, var(--mint-rgb)) / 0.55);
  background: rgb(var(--project-accent-rgb, var(--mint-rgb)) / 0.14);
  box-shadow: 0 0 0 3px rgb(var(--project-accent-rgb, var(--mint-rgb)) / 0.08);
}

.website-address-arrow {
  color: var(--ink-muted, var(--ink-soft));
}

.website-address-arrow svg {
  display: block;
  width: 28px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.website-domain-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.website-domain-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: var(--ink-soft);
  font-size: 10.5px;
  line-height: 1.45;
}

.website-check {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  fill: none;
  stroke: #4fbd81;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.website-domain-price {
  margin: -4px 0 0;
  color: var(--ink-soft);
  font-size: 10.5px;
  line-height: 1.5;
}

.website-domain-price strong {
  color: var(--ink);
  font-weight: 600;
}

.website-domain-callout-actions {
  flex-wrap: wrap;
  align-items: center;
}

.website-domain-pay-note {
  flex-basis: 100%;
  color: var(--ink-soft);
  font-size: 10px;
  line-height: 1.5;
}

/* The hero follows the width it has, not the window: side by side until the preview would
   get cramped, then stacked with the preview kept to a sensible size. */
.website-hosting-view {
  container: website-view / inline-size;
}

@container website-view (max-width: 600px) {
  .website-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .website-hero .website-browser {
    width: min(100%, 420px);
  }
}

@media (max-width: 760px) {
  .website-address-upgrade {
    grid-template-columns: minmax(0, 1fr);
  }

  .website-address-arrow {
    transform: rotate(90deg);
    justify-self: start;
    margin-left: 18px;
  }

  .website-domain-benefits {
    grid-template-columns: minmax(0, 1fr);
  }
}