.publish-flow {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  grid-template-rows: 4.25rem minmax(0, 1fr);
  overflow: hidden;
  background: #f5f7f6;
  color: #17211e;
  direction: rtl;
}
.publish-flow.hidden { display: none; }
.publish-flow button,
.publish-flow input { font: inherit; letter-spacing: 0; }
.publish-flow-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .65rem 1.5rem;
  border-bottom: 1px solid #dce2df;
  background: #fff;
}
.publish-flow-title { display: flex; align-items: baseline; gap: .75rem; min-width: 0; }
.publish-flow-title h2 { margin: 0; font-size: 1.1rem; line-height: 1.35; }
.publish-eyebrow { color: #087a64; font-size: .76rem; font-weight: 800; }
.publish-close {
  min-width: 3.5rem;
  min-height: 2.35rem;
  padding: .35rem .65rem;
  border: 1px solid #d4dbd8;
  border-radius: 6px;
  background: #fff;
  color: #46534f;
  cursor: pointer;
}
.publish-flow-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  min-height: 0;
  overflow: hidden;
}
.publish-flow-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 1.5rem max(1.5rem, calc((100% - 56rem) / 2));
}
.publish-flow-steps {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(7rem, 1fr);
  gap: 0;
  margin-bottom: 2rem;
  border-bottom: 1px solid #dce2df;
}
.publish-flow-step {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
  padding: .65rem .25rem .8rem;
  color: #7a8581;
  font-size: .8rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  text-align: start;
}
.publish-flow-step:not(:disabled) { cursor: pointer; }
.publish-flow-step:disabled { opacity: 1; }
.publish-flow-step > span {
  width: 1.55rem;
  height: 1.55rem;
  display: grid;
  place-items: center;
  flex: none;
  border: 1px solid #cfd7d3;
  border-radius: 50%;
  background: #fff;
  font-size: .72rem;
}
.publish-flow-step b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.publish-flow-step.on { border-bottom: 2px solid #087a64; color: #17211e; }
.publish-flow-step.on > span { border-color: #087a64; background: #087a64; color: #fff; }
.publish-flow-step.done { color: #087a64; }
.publish-flow-step.done > span { border-color: #b6d9cf; background: #e7f4f0; }
.publish-panel { width: min(100%, 50rem); min-width: 0; margin: 0 auto; }
.publish-panel h3 { margin: 0; font-size: 1.65rem; line-height: 1.35; }
.publish-lead { max-width: 42rem; margin: .45rem 0 1.4rem; color: #66736f; line-height: 1.75; }
.publish-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.publish-choice {
  position: relative;
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  align-items: start;
  gap: .75rem;
  min-height: 5rem;
  padding: 1rem;
  border: 1px solid #d7dedb;
  border-radius: 8px;
  background: #fff;
  color: #17211e;
  text-align: start;
  cursor: pointer;
}
.publish-choice:hover { border-color: #89b8aa; }
.publish-choice.selected { border-color: #087a64; box-shadow: 0 0 0 2px rgba(8,122,100,.1); }
.publish-choice-mark {
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border: 1px solid #cbd4d0;
  border-radius: 50%;
  color: #fff;
  font-size: .75rem;
}
.publish-choice.selected .publish-choice-mark { border-color: #087a64; background: #087a64; }
.publish-choice-copy { display: grid; gap: .28rem; min-width: 0; }
.publish-choice-copy b { font-size: .94rem; }
.publish-choice-copy small { color: #68746f; font-size: .78rem; line-height: 1.55; }
.publish-field { display: grid; gap: .45rem; margin-top: 1.25rem; font-size: .8rem; font-weight: 750; }
.publish-field input,
.publish-field select {
  width: 100%;
  min-height: 3rem;
  padding: .65rem .8rem;
  border: 1px solid #cfd8d4;
  border-radius: 6px;
  outline: none;
  background: #fff;
  color: #17211e;
}
.publish-field input:focus,
.publish-field select:focus { border-color: #087a64; box-shadow: 0 0 0 3px rgba(8,122,100,.1); }
.publish-field.invalid input { border-color: #b73d45; }
.publish-field-status { min-height: 1.4rem; margin-top: .35rem; color: #68746f; font-size: .78rem; }
.publish-field-status.ok { color: #087a64; }
.publish-field-status.bad { color: #b73d45; }
.publish-field-status.waiting { color: #286b9b; }
.publish-buy-domain {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .3rem 1rem;
  margin-top: 1rem;
  padding: 1rem 0;
  border-top: 1px solid #dce2df;
  border-bottom: 1px solid #dce2df;
}
.publish-buy-domain > span { color: #68746f; font-size: .8rem; }
.publish-buy-domain > button { grid-column: 2; grid-row: 1 / 3; min-height: 2.65rem; }
.publish-plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.publish-plan { min-height: 7.5rem; }
.publish-current {
  position: absolute;
  inset: .7rem auto auto .7rem;
  padding: .15rem .42rem;
  border-radius: 4px;
  background: #edf1ef;
  color: #5f6c67;
  font-size: .68rem;
  font-weight: 800;
}
.publish-plan-lines { display: block; margin-top: .2rem; color: #71807a; font-size: .72rem; line-height: 1.55; }
.publish-data-row {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .8rem;
  margin-top: 1rem;
  padding: .85rem 1rem;
  border-top: 1px solid #dce2df;
  border-bottom: 1px solid #dce2df;
}
.publish-data-row > div { display: grid; gap: .2rem; min-width: 0; }
.publish-data-row span { color: #68746f; font-size: .78rem; line-height: 1.55; }
.publish-data-row strong { color: #087a64; font-size: .75rem; }
.publish-data-icon { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 6px; background: #e7f4f0; color: #087a64 !important; font: 800 .68rem/1 monospace !important; }
.publish-warning,
.publish-error { margin: 1rem 0 0; padding: .7rem .8rem; border-inline-start: 3px solid #b9781d; background: #fff8e9; color: #76501d; font-size: .8rem; line-height: 1.7; }
.publish-review { border-top: 1px solid #dce2df; }
.publish-review-row { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; padding: .85rem 0; border-bottom: 1px solid #dce2df; }
.publish-review-row span { color: #6b7773; font-size: .8rem; }
.publish-review-row b { min-width: 0; overflow-wrap: anywhere; font-size: .86rem; font-weight: 700; }
.publish-bill { display: grid; grid-template-columns: 1fr auto; gap: .25rem 1rem; margin-top: 1rem; padding: 1rem; border: 1px solid #b9d5cd; border-radius: 8px; background: #f0f8f5; }
.publish-bill strong { font-size: 1.2rem; }
.publish-bill small { grid-column: 1 / -1; color: #66736f; }
.publish-actions { display: flex; align-items: center; justify-content: flex-end; gap: .65rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #dce2df; }
.publish-actions-spacer { flex: 1; }
.publish-actions button { min-height: 2.75rem; min-width: 7rem; border-radius: 6px; }
.publish-actions button.primary { background: #087a64; color: #fff; }
.publish-actions button:disabled { cursor: not-allowed; opacity: .45; }
.publish-summary { min-width: 0; overflow: auto; padding: 1.75rem 1.4rem; border-inline-start: 1px solid #dce2df; background: #fff; }
.publish-summary h3 { margin: 0 0 1rem; font-size: .92rem; }
.publish-facts { margin: 0; }
.publish-facts dt { margin-top: .9rem; color: #7b8782; font-size: .72rem; }
.publish-facts dd { margin: .25rem 0 0; overflow-wrap: anywhere; color: #28332f; font-size: .82rem; font-weight: 700; line-height: 1.55; }
.publish-safe-note { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid #dce2df; color: #286b9b; font-size: .76rem; line-height: 1.7; }
.publish-progress-panel { text-align: center; }
.publish-progress-mark { width: 3.25rem; height: 3.25rem; display: grid; place-items: center; margin: 0 auto 1rem; border: 1px solid #91beb1; border-radius: 50%; background: #e7f4f0; color: #087a64; font-size: 1.35rem; font-weight: 900; }
.publish-timeline { display: grid; gap: 0; width: min(100%, 34rem); margin: 1.5rem auto; padding: 0; list-style: none; text-align: start; }
.publish-timeline li { position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: center; gap: .7rem; min-height: 3.15rem; color: #89938f; }
.publish-timeline li:not(:last-child):after { content: ''; position: absolute; inset-inline-start: .96rem; inset-block-start: 2rem; width: 1px; height: 1.3rem; background: #d6dedb; }
.publish-timeline li > span { width: 2rem; height: 2rem; display: grid; place-items: center; z-index: 1; border: 1px solid #cfd8d4; border-radius: 50%; background: #fff; font-size: .72rem; }
.publish-timeline li.active { color: #17211e; }
.publish-timeline li.active > span { border: 5px solid #cbe4dc; background: #087a64; }
.publish-timeline li.done { color: #087a64; }
.publish-timeline li.done > span { border-color: #9bc7ba; background: #e7f4f0; }
.publish-error { width: min(100%, 38rem); margin-inline: auto; border-color: #b73d45; background: #fff1f2; color: #8c3037; text-align: start; }
.publish-error-detail { width: min(100%, 38rem); max-height: 13rem; margin: .75rem auto 0; overflow: auto; padding: .8rem; border: 1px solid #dce2df; border-radius: 6px; background: #15211d; color: #e4ece9; font: .74rem/1.65 monospace; direction: ltr; text-align: left; }
.publish-live-link { display: block; width: min(100%, 38rem); margin: 1rem auto; overflow-wrap: anywhere; color: #087a64; font: .82rem/1.7 monospace; direction: ltr; }
.publish-success-actions { width: min(100%, 38rem); margin-inline: auto; }
.publish-loading { min-height: 100%; display: grid; place-items: center; color: #66736f; }

:root[data-theme="dark"] .publish-flow { background: #101715; color: #eef4f1; }
:root[data-theme="dark"] .publish-flow-head,
:root[data-theme="dark"] .publish-summary,
:root[data-theme="dark"] .publish-choice,
:root[data-theme="dark"] .publish-field input,
:root[data-theme="dark"] .publish-field select,
:root[data-theme="dark"] .publish-timeline li > span { background: #17201d; color: #eef4f1; }
:root[data-theme="dark"] .publish-flow-head,
:root[data-theme="dark"] .publish-summary,
:root[data-theme="dark"] .publish-flow-steps,
:root[data-theme="dark"] .publish-review,
:root[data-theme="dark"] .publish-review-row,
:root[data-theme="dark"] .publish-actions,
:root[data-theme="dark"] .publish-data-row { border-color: #2c3935; }
:root[data-theme="dark"] .publish-choice,
:root[data-theme="dark"] .publish-field input,
:root[data-theme="dark"] .publish-field select { border-color: #3a4743; }
:root[data-theme="dark"] .publish-facts dd,
:root[data-theme="dark"] .publish-review-row b { color: #e2ebe7; }

@media (max-width: 54rem) {
  .publish-flow { grid-template-rows: 3.9rem minmax(0, 1fr); }
  .publish-flow-body { grid-template-columns: 1fr; overflow: auto; }
  .publish-flow-main { overflow: visible; padding: 1rem; }
  .publish-summary { order: -1; display: none; }
  .publish-flow-steps { grid-auto-columns: minmax(5rem, 1fr); margin-bottom: 1.35rem; overflow-x: auto; }
  .publish-choice-grid,
  .publish-plan-grid { grid-template-columns: 1fr; }
  .publish-panel h3 { font-size: 1.35rem; }
  .publish-actions { position: sticky; bottom: 0; z-index: 2; margin-inline: -1rem; padding: .8rem 1rem; background: #f5f7f6; }
  :root[data-theme="dark"] .publish-actions { background: #101715; }
}

@media (max-width: 34rem) {
  .publish-flow-head { padding-inline: .85rem; }
  .publish-eyebrow { display: none; }
  .publish-flow-step { justify-content: center; }
  .publish-flow-step b { display: none; }
  .publish-review-row { grid-template-columns: 1fr; gap: .25rem; }
  .publish-actions button { min-width: 0; flex: 1; }
  .publish-buy-domain { grid-template-columns: 1fr; }
  .publish-buy-domain > button { grid-column: 1; grid-row: auto; }
}

/* The term, above the plans it prices. */
.publish-terms { display: inline-flex; gap: .3rem; padding: .3rem; margin: .2rem 0 .9rem; border: 1px solid #dce2df; border-radius: 999px; background: #fff; }
.publish-term { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.3rem; padding: .3rem 1rem; border: 0; border-radius: 999px; background: transparent; color: #53605b; font: inherit; cursor: pointer; }
.publish-term small { padding: .05rem .4rem; border-radius: 999px; background: #e4f3ed; color: #08705c; font-size: .7rem; font-weight: 800; }
.publish-term.on { background: #087a64; color: #fff; font-weight: 800; }
.publish-term.on small { background: rgba(255,255,255,.2); color: #fff; }
:root[data-theme="dark"] .publish-terms { background: #17201d; border-color: #2c3935; }
:root[data-theme="dark"] .publish-term { color: #c4d0cb; }
@media (max-width: 36rem) { .publish-terms { display: flex; } .publish-term { flex: 1 1 0; justify-content: center; padding-inline: .4rem; } }

/* The room a site takes on its server, folded until asked. */
.publish-site-size { margin: 1.4rem 0 .2rem; padding-top: 1.1rem; border-top: 1px solid #dce2df; }
.publish-site-size summary { color: #34413c; font-size: .86rem; font-weight: 800; cursor: pointer; }
.publish-sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; margin-top: .7rem; }
.publish-size { display: grid; gap: .15rem; min-height: 3.4rem; padding: .5rem .6rem; border: 1px solid #dce2df; border-radius: 8px; background: #fff; color: #34413c; font: inherit; text-align: start; cursor: pointer; }
.publish-size small { color: #71807a; font-size: .7rem; line-height: 1.5; }
.publish-size.on { border-color: #087a64; box-shadow: inset 0 0 0 1px #087a64; }
.publish-owned-head { margin: 1.2rem 0 .5rem; font-size: 1.02rem; }
.publish-plan-holds { display: block; margin-top: .2rem; color: #08705c; font-size: .72rem; font-weight: 700; }
:root[data-theme="dark"] .publish-site-size { border-color: #2c3935; }
:root[data-theme="dark"] .publish-site-size summary { color: #dbe5e1; }
:root[data-theme="dark"] .publish-size { background: #17201d; border-color: #2c3935; color: #dbe5e1; }
:root[data-theme="dark"] .publish-size small { color: #a9b8b2; }
:root[data-theme="dark"] .publish-size.on { border-color: #0f9a7e; box-shadow: inset 0 0 0 1px #0f9a7e; }
:root[data-theme="dark"] .publish-plan-holds { color: #5fd0b4; }

/* A server of the site's own: the paid way to publish. */
.publish-dedicated-head { margin: 1.6rem 0 .2rem; padding-top: 1.2rem; border-top: 1px solid #dce2df; }
.publish-dedicated-head h4 { margin: 0 0 .3rem; font-size: 1.02rem; }
.publish-dedicated-head p { margin: 0; color: #5f6c67; font-size: .82rem; line-height: 1.75; }
.publish-tier { margin: 1rem 0 .5rem; color: #6b7773; font-size: .74rem; font-weight: 800; }
.publish-server:disabled { cursor: not-allowed; opacity: .55; }
.publish-server:disabled:hover { border-color: #dce2df; }
.publish-dedicated-note { margin: .8rem 0 0; padding: .65rem .8rem; border-inline-start: 3px solid #89b8aa; background: #f0f8f5; color: #36524a; font-size: .8rem; line-height: 1.7; }
.publish-dedicated-standing { display: grid; gap: .3rem; margin-top: 1.2rem; padding: 1rem; border: 1px solid #b9d5cd; border-radius: 8px; background: #f0f8f5; }
.publish-dedicated-standing span { color: #5f6c67; font-size: .8rem; }
.publish-dedicated-standing button { justify-self: start; min-height: 2.4rem; margin-top: .3rem; padding: 0 1rem; border: 1px solid #087a64; border-radius: 6px; background: #fff; color: #087a64; font: inherit; font-weight: 700; cursor: pointer; }
:root[data-theme="dark"] .publish-dedicated-head { border-color: #2c3935; }
:root[data-theme="dark"] .publish-dedicated-head p,
:root[data-theme="dark"] .publish-dedicated-standing span { color: #a9b8b2; }
:root[data-theme="dark"] .publish-dedicated-note,
:root[data-theme="dark"] .publish-dedicated-standing { background: #14231f; border-color: #2c4a41; color: #c9d8d2; }
:root[data-theme="dark"] .publish-dedicated-standing button { background: #17201d; }
:root[data-theme="dark"] .publish-timeline li { color: #7f8d88; }
:root[data-theme="dark"] .publish-timeline li.active { color: #eef4f1; }
:root[data-theme="dark"] .publish-timeline li.active > span { border-color: #1f3d35; background: #0f9a7e; }
:root[data-theme="dark"] .publish-timeline li.done { color: #5fd0b4; }
:root[data-theme="dark"] .publish-timeline li.done > span { border-color: #2c5a4e; background: #14231f; color: #5fd0b4; }
:root[data-theme="dark"] .publish-timeline li:not(:last-child):after { background: #2c3935; }
:root[data-theme="dark"] .publish-progress-mark { border-color: #2c5a4e; background: #14231f; color: #5fd0b4; }
.publish-waited { margin: -.3rem 0 0; color: #6b7773; font-size: .8rem; }
:root[data-theme="dark"] .publish-waited { color: #93a39d; }
.publish-dedicated-standing .publish-dedicated-note { margin: .2rem 0 0; }
.publish-dedicated-standing .publish-link { justify-self: start; padding: 0; border: 0; background: none; color: #8c3037; font: inherit; font-size: .8rem; text-decoration: underline; cursor: pointer; }
:root[data-theme="dark"] .publish-dedicated-standing .publish-link { color: #f0a3a9; }

/* عرضُ ربط واتساب في شاشة الانتظار: رابطٌ هادئ لا زرّ يزاحم التقدّم. */
.publish-wa-offer { margin-top: 1rem; padding: .55rem .9rem; border: 1px dashed #89b8aa; border-radius: .6rem; background: transparent; color: #286b5b; font: inherit; font-size: .82rem; cursor: pointer; }
.publish-wa-offer:hover { background: #f0f8f5; }
:root[data-theme="dark"] .publish-wa-offer { color: #9fd6c5; border-color: #3f6e61; }
:root[data-theme="dark"] .publish-wa-offer:hover { background: #16231f; }

/*
 * الخطوة الجارية تنبض: انتظارُ ساعةٍ على خطوةٍ لا تتحرّك يُقرأ انتظارًا لا صفحةً تجمّدت.
 * ومن طلب تقليل الحركة يرى الحلقة ثابتة.
 */
@keyframes publish-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(8, 122, 100, .35); }
  50% { box-shadow: 0 0 0 .45rem rgba(8, 122, 100, 0); }
}
@keyframes publish-pulse-dark {
  0%, 100% { box-shadow: 0 0 0 0 rgba(95, 208, 180, .4); }
  50% { box-shadow: 0 0 0 .45rem rgba(95, 208, 180, 0); }
}
.publish-timeline li.active > span { animation: publish-pulse 1.8s ease-in-out infinite; }
:root[data-theme="dark"] .publish-timeline li.active > span { animation-name: publish-pulse-dark; }
@media (prefers-reduced-motion: reduce) {
  .publish-timeline li.active > span,
  :root[data-theme="dark"] .publish-timeline li.active > span { animation: none; }
}
.publish-heard { margin: -.6rem 0 0; color: #6b7773; font-size: .78rem; }
:root[data-theme="dark"] .publish-heard { color: #93a39d; }

/* «أكّد بريدك» مكانَ الوعد: سطرٌ هادئ بزرّه، لا نافذةٌ تقفز. */
.publish-mail-confirm { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem .6rem; margin: .8rem 0 0; color: #7a5a12; font-size: .82rem; }
.publish-mail-confirm .publish-link { padding: 0; border: 0; background: none; color: #087a64; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.publish-bill .publish-mail-confirm { grid-column: 1 / -1; justify-content: flex-start; margin: .2rem 0 0; }
.publish-bill .publish-bill-promise { color: #286b5b; }
:root[data-theme="dark"] .publish-mail-confirm { color: #e4c27a; }
:root[data-theme="dark"] .publish-mail-confirm .publish-link { color: #5fd0b4; }
:root[data-theme="dark"] .publish-bill .publish-bill-promise { color: #9fd6c5; }

/* الدومين قيد الربط: جملة المنصّة كما هي، هادئةً ما دام يُنتظر، وبلون التنبيه حين صار للفريق. */
.publish-domain-link { margin: .7rem 0 0; color: #286b5b; font-size: .84rem; }
.publish-domain-link.handed-over { color: #7a5a12; }
:root[data-theme="dark"] .publish-domain-link { color: #9fd6c5; }
:root[data-theme="dark"] .publish-domain-link.handed-over { color: #e4c27a; }

/* ما هو محفوظ وما يمكن الرجوع إليه: سطران هادئان في أعلى الخطوة، لا يزاحمان الاختيار. */
.publish-last-copy { margin: .4rem 0 0; color: #286b5b; font-size: .82rem; }
.publish-rollback { margin: .5rem 0 0; }
.publish-rollback .publish-link { padding: 0; border: 0; background: none; color: #8c3037; font: inherit; font-size: .82rem; text-decoration: underline; cursor: pointer; }
.publish-rollback .publish-link:disabled { opacity: .6; cursor: default; }
:root[data-theme="dark"] .publish-last-copy { color: #9fd6c5; }
:root[data-theme="dark"] .publish-rollback .publish-link { color: #f0a3a9; }

/* الخطوة المتأخّرة حالةٌ بنفسها: كهرمانيّة بعلامةٍ وكلمة، لا خطوةٌ تبدو كأنّها لم تبدأ. واللون ليس الإشارة الوحيدة. */
.publish-timeline li.late { color: #7a5a12; }
.publish-timeline li.late > span { border: 2px solid #d9a93a; background: #fff8e6; color: #7a5a12; font-weight: 700; }
.publish-progress-mark.warn { border-color: #d9a93a; background: #fff8e6; color: #7a5a12; }
:root[data-theme="dark"] .publish-timeline li.late { color: #e4c27a; }
:root[data-theme="dark"] .publish-timeline li.late > span { border-color: #8a6a1f; background: #2a2210; color: #e4c27a; }
:root[data-theme="dark"] .publish-progress-mark.warn { border-color: #8a6a1f; background: #2a2210; color: #e4c27a; }
/* الزرّ وهو يعمل: يبقى مركَّزًا ومقروءًا، ولا يُضغط مرّتين. */
.publish-actions [aria-busy="true"] { opacity: .75; cursor: progress; }
.publish-actions button[aria-busy="true"]::before,
.publish-dedicated-standing button[aria-busy="true"]::before { content: ''; display: inline-block; width: .8rem; height: .8rem; margin-inline-end: .45rem; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; vertical-align: -.1rem; animation: publish-spin .8s linear infinite; }
.publish-dedicated-standing button[aria-busy="true"] { opacity: .75; cursor: progress; }
@keyframes publish-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .publish-actions button[aria-busy="true"]::before, .publish-dedicated-standing button[aria-busy="true"]::before { animation: none; } }

/* طريقٌ إلى الدومين لا يكتمل: يُرسم معطّلًا بسببه الواحد، لا يُعرَض حيًّا. */
.publish-choice:disabled { cursor: not-allowed; opacity: 1; border-style: dashed; background: #f7f9f8; color: #4a5551; }
.publish-choice:disabled:hover { border-color: #d7dedb; }
.publish-choice:disabled .publish-choice-mark { opacity: .5; }
:root[data-theme="dark"] .publish-choice:disabled { background: #131b18; color: #b9c6c1; }
:root[data-theme="dark"] .publish-choice:disabled:hover { border-color: #3a4743; }
/* سببُ الإغلاق مرّةً واحدة تحت الطرق، بتباينٍ مقروء. */
.publish-road-reason { margin: .75rem 0 0; padding: .6rem .8rem; border-inline-start: 3px solid #89b8aa; background: #f0f8f5; color: #2f4a42; font-size: .84rem; line-height: 1.7; }
:root[data-theme="dark"] .publish-road-reason { background: #14231f; color: #c9d8d2; }

/* إعداد الدومين بعد النشر: مطويٌّ تحت اسمه وحالته، فتبقى لحظةُ النجاح نظيفة. */
.publish-dns { width: min(100%, 38rem); margin: 1rem auto 0; border: 1px solid #dce2df; border-radius: 8px; background: #fff; text-align: start; }
.publish-dns-head { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; padding: .8rem 1rem; font-size: .86rem; cursor: pointer; }
.publish-dns-name { min-width: 0; overflow-wrap: anywhere; color: #34413c; font: .82rem/1.5 monospace; }
.publish-dns-pill { margin-inline-start: auto; padding: .12rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.publish-dns-pill.waiting { background: #fff5df; color: #7a5a12; }
.publish-dns-pill.ok { background: #e4f3ed; color: #08705c; }
.publish-dns-lead,
.publish-dns-note { margin: 0; padding: 0 1rem .7rem; color: #5f6c67; font-size: .8rem; line-height: 1.75; }
.publish-dns-note { padding-top: .7rem; font-size: .76rem; }
.publish-dns-note + .publish-dns-note { padding-top: 0; }
.publish-dns-table { display: grid; margin: 0 1rem; border-top: 1px solid #dce2df; }
.publish-dns-row { display: grid; grid-template-columns: 3.4rem minmax(5rem, 9rem) minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid #edf1ef; }
.publish-dns-labels { padding: .4rem 0; color: #7b8782; font-size: .72rem; }
.publish-dns-type { color: #34413c; font: 700 .76rem/1.4 monospace; text-align: left; }
.publish-dns-host,
.publish-dns-value { min-width: 0; overflow-wrap: anywhere; text-align: left; font: .78rem/1.5 monospace; color: #17211e; }
.publish-dns-value { padding: .25rem .45rem; border-radius: 6px; background: #f1f4f3; }
.publish-dns-copy { min-height: 2rem; padding: .2rem .65rem; border: 1px solid #cfd7d3; border-radius: 6px; background: #fff; color: #087a64; font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer; }
:root[data-theme="dark"] .publish-dns { background: #17201d; border-color: #2c3935; }
:root[data-theme="dark"] .publish-dns-name,
:root[data-theme="dark"] .publish-dns-type,
:root[data-theme="dark"] .publish-dns-host,
:root[data-theme="dark"] .publish-dns-value { color: #dbe5e1; }
:root[data-theme="dark"] .publish-dns-value { background: #101715; }
:root[data-theme="dark"] .publish-dns-lead,
:root[data-theme="dark"] .publish-dns-note { color: #a9b8b2; }
:root[data-theme="dark"] .publish-dns-table,
:root[data-theme="dark"] .publish-dns-row { border-color: #2c3935; }
:root[data-theme="dark"] .publish-dns-copy { background: #17201d; border-color: #3a4743; color: #5fd0b4; }
:root[data-theme="dark"] .publish-dns-pill.waiting { background: #2a2210; color: #e4c27a; }
:root[data-theme="dark"] .publish-dns-pill.ok { background: #14231f; color: #5fd0b4; }
/* على الهاتف: كلُّ سجلٍّ بطاقةٌ من سطرين — النوع والاسم، ثمّ القيمة بزرّ نسخها — لا جدولٌ ينكسر. */
@media (max-width: 34rem) {
  .publish-dns-labels { display: none; }
  .publish-dns-row { grid-template-columns: auto minmax(0, 1fr) auto; gap: .35rem .5rem; }
  .publish-dns-value { grid-column: 1 / 3; grid-row: 2; }
  .publish-dns-copy { grid-column: 3; grid-row: 2; }
}

/*
 * One launch: a new name searched and chosen inside the flow, one bill with a
 * line per thing it buys, and its progress part by part. Built from the
 * domains console's result rows (`dom-*`) and this flow's own tokens.
 */
.publish-new-domain { display: grid; gap: .6rem; margin-top: 1rem; }
.publish-new-domain .dom-search-form input { min-height: 2.9rem; }
.publish-new-domain .dom-search-form button.primary { min-height: 2.9rem; padding-inline: 1.2rem; font-weight: 800; }
.publish-new-domain .dom-result { gap: .75rem; padding: .7rem .85rem; }
.publish-new-domain .dom-owner-form { padding: .9rem; }
.publish-hint { margin: 0; color: #66736f; font-size: .84rem; line-height: 1.7; }
.publish-bill-lines { grid-column: 1 / -1; display: grid; gap: .35rem; margin: 0 0 .55rem; padding: 0 0 .6rem; border-bottom: 1px dashed #b9d5cd; list-style: none; }
.publish-bill-lines li { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; }
.publish-bill-lines li span { min-width: 0; overflow-wrap: anywhere; }
.publish-bill-lines li b { flex: none; font-weight: 700; }
.publish-bill .publish-bill-promise { color: #17624f; }
.publish-parts li { grid-template-columns: 2rem minmax(0, 1fr); min-height: 3.6rem; }
.publish-parts li:not(:last-child):after { height: 1.7rem; }
.publish-part-copy { display: grid; gap: .1rem; }
.publish-part-copy b { color: inherit; }
.publish-part-copy small { color: #66736f; font-size: .82rem; line-height: 1.6; }
.publish-parts li.late { color: #8a5a12; }
.publish-parts li.late > span { border-color: #e7c98f; background: #fff5df; color: #8a5a12; }
.publish-launch-bill { margin: .2rem 0 .6rem; color: #46534f; font-size: .88rem; }
:root[data-theme="dark"] .publish-hint,
:root[data-theme="dark"] .publish-part-copy small { color: #a9b6b1; }
:root[data-theme="dark"] .publish-bill-lines { border-color: #2c3935; }
:root[data-theme="dark"] .publish-launch-bill { color: #c4d0cb; }
@media (max-width: 34rem) {
  .publish-new-domain .dom-result { grid-template-columns: minmax(0, 1fr) auto; }
  .publish-new-domain .dom-result > button { grid-column: 1 / -1; }
  .publish-new-domain .dom-owner-form { grid-template-columns: minmax(0, 1fr); }
}
.publish-not-offered bdi { text-decoration: none; }
.publish-parts { width: min(100%, 36rem); }
.publish-parts li { align-items: start; padding-block: .35rem; }
.publish-parts li > span { margin-top: .1rem; }
/* The shared pool: its plans the way to publish, and its one sentence when there is no room. */
.publish-pool-head { margin: .9rem 0 .4rem; color: #36524a; font-size: .86rem; font-weight: 700; line-height: 1.7; }
.publish-dedicated-note.publish-closed { border-inline-start-color: #c9a227; background: #fbf6e6; color: #5c4a12; }
:root[data-theme="dark"] .publish-pool-head { color: #c9d8d2; }
:root[data-theme="dark"] .publish-dedicated-note.publish-closed { background: #241f10; border-color: #6b5a1f; color: #e8d9a8; }
/* «كود خصم (اختياريّ)» on the review bill: the amount it changes is the server's answer, never this page's. */
.publish-coupon { grid-column: 1 / -1; display: grid; gap: .3rem; margin-top: .6rem; }
.publish-coupon input { min-height: 2.6rem; padding: .4rem .7rem; border: 1px solid #b9d5cd; border-radius: 6px; background: #fff; font: inherit; letter-spacing: .05em; }
.publish-coupon .publish-warning { margin: 0; }
.publish-bill-was { margin-inline-end: .35rem; color: #66736f; font-weight: 400; }
.publish-bill .publish-bill-off, .publish-bill-lines .publish-bill-off { margin-inline-end: .35rem; color: #17624f; font-size: .82rem; font-weight: 700; }
:root[data-theme="dark"] .publish-coupon input { border-color: #2c3935; background: #141a18; color: inherit; }
:root[data-theme="dark"] .publish-bill-was { color: #a9b6b1; }
:root[data-theme="dark"] .publish-bill .publish-bill-off,
:root[data-theme="dark"] .publish-bill-lines .publish-bill-off { color: #9fd6c5; }
/* Shut only where money has already arrived on this launch: nothing of it is priced again. */
.publish-coupon input:disabled { opacity: .55; cursor: not-allowed; }
.publish-coupon .publish-link { justify-self: start; font-size: .84rem; }
/* A payment page already open: what it costs, when it frees itself, and the one press that gives it up. */
.publish-open-page { display: grid; gap: .4rem; justify-items: start; }
.publish-open-page .publish-drop { font-size: .86rem; }