/* Portal — Persian, RTL. Layout uses logical properties so nothing needs mirroring. */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: Vazirmatn, Tahoma, sans-serif; }

:root {
  --teal: #17808a;
  --teal-dark: #116470;
  --bg: #faf9f5;
  --panel: #fff;
  --line: #e8e5dd;
  --txt: #2b2a26;
  --muted: #7a766c;
  --danger: #b3261e;

  /* The sidebar is the same column on every page of the portal — the inbox, a thread, the
     service list, the wizard, the payment page. It was 208px on some and 288px on others,
     which made it look like a different sidebar depending on where you had come from.
     One number, defined here, used by every shell. It is sized for the widest thing it
     ever holds: a ticket row with a title, a preview line and its meta. */
  --side-min: 240px;
  --side-max: 288px;
}

body {
  background: var(--bg);
  color: var(--txt);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── the tools bar ─────────────────────────────────────────────────────────────────────
   Nine links across, under the brand. On a narrow screen it scrolls sideways INSIDE its
   own container rather than widening the page — the one thing a horizontal menu must not
   do is give the document a horizontal scrollbar.
   ────────────────────────────────────────────────────────────────────────────────────── */
.toolbar { min-width: 0; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.toolbar ul { display: flex; align-items: center; gap: 2px; list-style: none;
  margin: 0; padding: 0; white-space: nowrap; }
/* 40px tall even though the text is small: on a phone this bar is a row of finger
   targets, and 30px is the height that makes people hit the wrong tool. */
.toolbar a { display: inline-flex; align-items: center; gap: 3px; padding: 6px 9px;
  min-height: 40px; border-radius: 8px; font-size: .78rem; color: var(--muted);
  text-decoration: none; }
.toolbar a:hover, .toolbar a:focus-visible { background: rgba(23,128,138,.09); color: var(--teal-dark); }
.toolbar .ext { font-size: .62rem; opacity: .55; }
@media (max-width: 700px) { .toolbar a { padding: 6px 7px; font-size: .74rem; min-height: 44px; } }

.top {
  background: var(--panel);
  border-block-end: 1px solid var(--line);
  padding: 10px clamp(16px, 5vw, 48px);
  display: flex;
  align-items: center;
  gap: 18px;
}
.top .brand { flex: none; }
.brand { font-weight: 800; font-size: 1.05rem; }

.wrap {
  flex: 1;
  width: 100%;
  /* A login form does not get better at 900px — narrow stays narrow on purpose. */
  max-width: 560px;
  margin-inline: auto;
  padding: clamp(16px, 4vw, 40px) clamp(12px, 3vw, 24px);
}

/* Ticket list, thread and the new-ticket form: these hold real content, so they use the
   screen. The cap exists because a support message set in a 1600px line is unreadable —
   but the cap belongs on the PROSE, not on the page: the sidebar takes ~290px of this and
   a request page is mostly a form, where wider means more fields side by side and less
   scrolling. So the shell is wide and the paragraphs inside it are capped instead. */
.wrap--wide { max-width: 1440px; }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(18px, 4vw, 34px);
  box-shadow: 0 4px 18px rgba(60, 50, 30, .05);
}

@media (max-width: 520px) {
  /* edge-to-edge on a phone: a 16px gutter each side wastes a tenth of the screen */
  .card { border-radius: 14px; padding: 16px 14px; }
  .wrap { padding-inline: 10px; }
}

h1 { font-size: 1.25rem; font-weight: 800; margin-block-end: 10px; }
h2 { font-size: 1rem; font-weight: 700; margin-block: 22px 8px; }
.lead { color: var(--muted); line-height: 2; font-size: .92rem; margin-block-end: 18px; }

label { display: block; font-size: .85rem; font-weight: 600; margin-block-end: 6px; }

input[type="email"], input[type="text"] {
  width: 100%;
  max-width: 560px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 1rem;
  background: #fff;
  color: var(--txt);
}
input:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }

.btn {
  display: inline-block;
  width: 100%;
  max-width: 420px;
  margin-block-start: 14px;
  padding: 12px 18px;
  border: none;
  border-radius: 100px;
  background: var(--teal);
  color: #fff;
  font: inherit;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--teal-dark); }
.btn.secondary { background: transparent; color: var(--teal); border: 1px solid var(--teal); }
/* Filled but quiet — for actions that should look like buttons without competing with the
   solid teal ones for attention. */
.btn.soft { background: rgba(23, 128, 138, .09); color: var(--teal-dark); }
.btn.soft:hover { background: rgba(23, 128, 138, .17); color: var(--teal-dark); }

.sep { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .8rem; margin-block: 18px; }
.sep::before, .sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.err { color: var(--danger); font-size: .85rem; margin-block-start: 10px; }
.hint { color: var(--muted); font-size: .8rem; margin-block-start: 12px; line-height: 1.9; }

/* The code is Latin digits the customer copies from an email — keep it LTR and monospace
   so 6 and 9 cannot be confused, even inside an RTL paragraph. */
.code-input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .35em; text-align: center; direction: ltr; }

.foot { color: var(--muted); font-size: .75rem; text-align: center; padding: 0 16px 28px; }
.foot a { display: inline-block; min-height: 40px; line-height: 40px; color: var(--teal-dark); }

.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row .btn { width: auto; flex: 1 1 auto; }

/* ── ticket list ─────────────────────────────────────────────────────────────────── */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* On a phone the heading wraps and the action beside it gets squeezed into a two-line
   lozenge overlapping the title. Below this width they are simply two rows. */
@media (max-width: 620px) {
  .card-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .card-head .btn--sm { width: 100%; }
  .card-head-side { justify-content: flex-start; }
}
.linkbtn { background: none; border: none; color: var(--muted); font: inherit; font-size: .82rem;
            cursor: pointer; text-decoration: underline;
            /* a 20px-high link is a miss on a phone — pad it to a real touch target */
            padding: 10px 8px; margin: -10px -8px; min-height: 40px; }
.linkbtn:hover { color: var(--teal); }

.tickets { display: flex; flex-direction: column; gap: 10px; margin-block-end: 22px; }
.ticket { display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px;
          text-decoration: none; color: var(--txt); background: #fff; transition: border-color .12s, transform .12s; }
.ticket:hover { border-color: var(--teal); transform: translateY(-1px); }
.ticket.unread { border-inline-start: 3px solid var(--teal); }
.ticket-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ticket-title { font-weight: 700; font-size: .95rem; overflow-wrap: anywhere; }
.ticket-meta { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .78rem;
                margin-block-start: 6px; flex-wrap: wrap; }
/* the last thing said in the thread — what actually tells two "گفتگو #…" rows apart */
.ticket-preview { color: var(--muted); font-size: .82rem; margin-block-start: 6px; line-height: 1.8;
                  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
                  unicode-bidi: plaintext; }
@media (min-width: 760px) {
  .ticket { padding: 16px 20px; }
  .ticket-title { font-size: 1rem; }
  .ticket-preview { -webkit-line-clamp: 2; }
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); display: inline-block; }

.pill { flex: none; font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: 100px; white-space: nowrap; }
.pill.active { background: rgba(23,128,138,.12); color: var(--teal-dark); }
.pill.closed { background: #eee9df; color: var(--muted); }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-block-start: 18px; }
.pager .btn { width: auto; max-width: none; margin: 0; padding: 8px 16px; font-size: .85rem; }
.pager-pos { color: var(--muted); font-size: .8rem; }

/* ── thread ──────────────────────────────────────────────────────────────────────── */
.back { color: var(--teal); font-size: .85rem; text-decoration: none;
         display: inline-block; padding: 10px 4px; min-height: 40px; }
.back:hover { text-decoration: underline; }
/* A back link is a navigation control, not a caption: give it a real target height. */
.back { display: inline-flex; align-items: center; min-height: 44px; }
.thread { display: flex; flex-direction: column; gap: 8px; margin-block-start: 14px; }

.day { text-align: center; color: var(--muted); font-size: .75rem; margin-block: 6px; }
.day span { background: var(--bg); padding: 2px 10px; border-radius: 100px; border: 1px solid var(--line); }

.msg { border: 1px solid var(--line); border-radius: 14px; padding: 6px 10px; background: #fff; max-width: 100%; }
@media (min-width: 700px) {
  /* Only wide enough for the alternation to be legible — on a phone, full width. */
  /* A line of Persian prose stops being readable somewhere around 90 characters, whatever
     the column can afford — so the bubble is capped by content, not only by the column. */
  .msg { max-width: min(76%, 56rem); }
  .msg-body { font-size: .95rem; }
}
/* Both sides hang off the reading edge — the right, in RTL — rather than facing each other
   across the column. Sinaweb's replies sit flush against it; the customer's are stepped in,
   so the conversation reads as one indented thread instead of a zig-zag the eye has to
   track. The tint and the indent carry the distinction together, so it survives for anyone
   who cannot separate the two colours.

   Written as margin-inline (auto on the END side pushes the box to the START edge) so the
   whole arrangement mirrors correctly if this is ever rendered LTR. */
.msg.theirs { margin-inline-start: 0; margin-inline-end: auto; }
.msg.mine { margin-inline-start: 28px; margin-inline-end: auto;
            background: rgba(23,128,138,.07); border-color: rgba(23,128,138,.25); }
.msg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-block-end: 1px; }
.msg-who { font-weight: 700; font-size: .8rem; }
.msg-head time { color: var(--muted); font-size: .72rem; }

/* Base direction is forced RTL rather than detected, so a paragraph that happens to start
   with an English word or a ticket number no longer flips the whole line to LTR. `isolate`
   keeps embedded English/URL runs laid out correctly inside that RTL paragraph. */
.msg-body { font-size: .9rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
            direction: rtl; unicode-bidi: isolate; text-align: right; }
/* Blank lines in the source became paragraphs (see bodyHtml) — a small gap instead of a
   full empty line box is the single biggest saving in bubble height. */
.msg-body p { margin: 0; }
.msg-body p + p { margin-block-start: .35em; }
/* A URL inside someone's message is prose, not a control. Giving it a 40px box would
   break the line height of every paragraph that contains one; the accessible target here
   is the sentence it sits in. The mobile audit flags these and they stay flagged. */
.msg-body a { color: var(--teal-dark); }

.choices { margin-block-start: 8px; padding-inline-start: 18px; color: var(--muted); font-size: .82rem; }
.files { margin-block-start: 8px; padding-inline-start: 18px; font-size: .82rem; }
.csat-note { margin-block-start: 8px; color: var(--muted); font-size: .78rem; }

/* ── write forms ─────────────────────────────────────────────────────────────────── */
textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
           font-size: .95rem; line-height: 1.9; background: #fff; color: var(--txt); resize: vertical;
           unicode-bidi: plaintext; }
textarea:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.reply { margin-block-start: 22px; padding-block-start: 18px; border-block-start: 1px solid var(--line); }
.notice { background: rgba(23,128,138,.1); color: var(--teal-dark); border-radius: 12px;
          padding: 10px 14px; font-size: .85rem; margin-block-end: 14px; }

input[type="file"] { width: 100%; padding: 10px 12px; border: 1px dashed var(--line);
                     border-radius: 12px; background: #fff; font-size: .85rem; color: var(--muted); }
input[type="file"]::file-selector-button { font: inherit; font-size: .8rem; margin-inline-end: 10px;
  padding: 6px 12px; border: 1px solid var(--teal); border-radius: 100px;
  background: transparent; color: var(--teal); cursor: pointer; }
.file-label { margin-block-start: 12px; }


/* ── inbox shell: sidebar + open thread ──────────────────────────────────────────── */
.shell { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }

/* Two columns once there is room for both. In RTL the first grid item lands on the
   right automatically — no mirroring needed. The tools aside is last in the markup, so
   here it simply falls onto a second row under the ticket list. */
@media (min-width: 900px) {
  .shell--thread { grid-template-columns: minmax(var(--side-min), var(--side-max)) minmax(0, 1fr); }
  .shell--thread .side--tools { grid-column: 1; grid-row: 1; }
  .shell--thread .main { grid-column: 2; grid-row: 1; }
}

/* One sidebar, on the inline-start edge — which in RTL is the right. The thread page used
   to have three columns (conversation, ticket list, tools); the ticket list now folds into
   the sidebar under «درخواست‌های من», so there are two. */
@media (min-width: 1180px) {
  .wrap--wide:has(.shell--thread) { max-width: 1560px; }
  .shell--thread { grid-template-columns: minmax(var(--side-min), var(--side-max)) minmax(0, 1fr); }
  .shell--thread .side--tools { grid-column: 1; grid-row: 1; }
  .shell--thread .main { grid-column: 2; grid-row: 1; }

  .shell--list { grid-template-columns: minmax(var(--side-min), var(--side-max)) minmax(0, 1fr); }
  .shell--list .side--tools { grid-column: 1; grid-row: 1; }
  .shell--list .side:not(.side--tools) { grid-column: 2; grid-row: 1; }
  /* The service pages put a plain card where the inbox puts its ticket sidebar. Without
     this it auto-flowed into column 1 and shoved the tools to the left-hand edge. */
  .shell--list > .card { grid-column: 2; grid-row: 1; min-width: 0; }
}

/* The tickets block inside that sidebar: the case they are in, then everything else
   behind a disclosure. A support page should open on the conversation, not on a list of
   the twenty that are already finished. */
.side-tickets { margin-block-end: 18px; padding-block-end: 16px;
  border-block-end: 1px solid var(--line); }
.side-tickets h2 { font-size: .95rem; margin-block-end: 2px; }
.side-tickets .tickets { margin-block-end: 0; }
.side-more { margin-block-start: 10px; }
.side-more > summary { cursor: pointer; font-size: .8rem; font-weight: 600;
  color: var(--teal-dark); min-height: 44px; display: flex; align-items: center; gap: 6px;
  list-style: none; }
.side-more > summary::-webkit-details-marker { display: none; }
.side-more > summary::before { content: "▾"; font-size: .7rem; transition: transform .15s;
  display: inline-block; }
.side-more[open] > summary::before { transform: rotate(180deg); }
.side-more .tickets { margin-block-start: 8px; }

.card-head-side { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* 40px minimum: a 34px button is under the usable touch target, which is how the logout
   and back links failed the first accessibility pass on this portal. */
.btn--sm { width: auto; max-width: none; margin-block-start: 0; padding: 7px 14px;
  font-size: .8rem; min-height: 40px; display: inline-flex; align-items: center;
  justify-content: center; }
/* On a phone the topics column is already hidden on this page, so the control is noise. */

.side {
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  padding: 18px 16px; box-shadow: 0 4px 18px rgba(60, 50, 30, .05);
  position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto;
}
.side-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.side-head h1 { font-size: 1.05rem; }
.side-who { color: var(--muted); font-size: .8rem; margin-block: 6px 12px; overflow-wrap: anywhere; }
.side .btn { margin-block: 0 14px; padding: 10px 16px; font-size: .9rem; }
.side .tickets { gap: 8px; margin-block-end: 0; }
.side .ticket { padding: 11px 13px; }
.side .ticket-title { font-size: .88rem; }
.side .ticket-preview { font-size: .78rem; -webkit-line-clamp: 1; }
.side .ticket-meta { font-size: .72rem; }

/* the open conversation, marked without relying on colour alone */
.ticket.is-active { border-color: var(--teal); background: rgba(23, 128, 138, .06); }
.ticket.is-active .ticket-title { color: var(--teal-dark); }

/* «دسترسی سریع» — the ai.sinaweb.org tools, in their own panel. Quieter than a ticket
   row on purpose: these are a way out of the page, not the reason the customer is on it. */
.side--tools { padding: 16px 14px; }
.side--tools h2 { font-size: .92rem; font-weight: 800; margin-block: 0; }
.side-links-note { color: var(--muted); font-size: .72rem; margin-block: 3px 10px; }
/* The account portal: the one link here that is the customer's own, so it gets weight the
   plain rows do not. Solid teal rather than a tint — it has to win against a list of ten. */
.side-featured {
  display: block; margin-block: 2px 14px;
  padding: 11px 12px; border-radius: 12px;
  background: var(--teal); color: #fff; text-decoration: none;
  box-shadow: 0 2px 10px rgba(23, 128, 138, .25);
}
.side-featured:hover, .side-featured:focus-visible { background: var(--teal-dark); }
.side-featured-title {
  display: flex; align-items: center; gap: 6px;
  font-weight: 800; font-size: .87rem;
}
.side-featured-note {
  display: block; margin-block-start: 3px;
  font-size: .72rem; line-height: 1.7; color: rgba(255, 255, 255, .85);
}
.side-featured .ext { color: rgba(255, 255, 255, .8); font-size: .7rem; }

/* Logout closes this column. It lives here rather than with the tickets because that
   column can be collapsed, and hiding your topics must not hide the way out. */
.side-logout { margin-block-start: 12px; padding-block-start: 10px; border-block-start: 1px solid var(--line); }
.logout-btn { margin-block-start: 0; padding: 8px 14px; font-size: .82rem; }

.side-links-group + .side-links-group { margin-block-start: 12px; }
.side-links-group h3 {
  color: var(--muted); font-size: .72rem; font-weight: 700;
  letter-spacing: .02em; margin-block-end: 5px;
}
.side-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.side-links a {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 9px; border-radius: 9px;
  color: var(--txt); text-decoration: none; font-size: .83rem;
}
.side-links a:hover, .side-links a:focus-visible {
  background: rgba(23, 128, 138, .07); color: var(--teal-dark);
}
/* the arrow leans on the text direction, so it points "away" in RTL too */
.side-links .ext { color: var(--muted); font-size: .7rem; }
.side-links a:hover .ext, .side-links a:focus-visible .ext { color: var(--teal); }

.main { margin: 0; }
.main .card-head h2 { font-size: 1.15rem; font-weight: 800; overflow-wrap: anywhere; }

/* On a phone the sidebar IS the page: the thread hides it, and «بازگشت به فهرست» goes
   back to /portal/list rather than trying to show both at once. */
.only-narrow { display: block; }
@media (min-width: 900px) {
  .only-narrow { display: none; }
  .shell--list .side { position: static; max-height: none; }
}
@media (max-width: 899px) {
  .shell--thread .side { display: none; }
  .side { position: static; max-height: none; }
}

/* Which portal am I in? Two products with similar names, and a customer who lands in the
   wrong one loses trust in both — so the page names the one it is and offers the other.
   The current row is deliberately not a link: nothing is more annoying than a button that
   reloads the page you are already on. */
.portals { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.portals-title { font-size: .78rem; color: var(--muted); margin-bottom: 8px; }
.portal-row {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 8px; background: #fff;
}
.portal-row strong { display: block; font-size: .92rem; }
.portal-row span { display: block; font-size: .76rem; color: var(--muted); margin-top: 2px; }
a.portal-row:hover { border-color: var(--accent, #0f766e); }
.portal-row.current {
  background: color-mix(in srgb, var(--accent, #0f766e) 7%, #fff);
  border-color: color-mix(in srgb, var(--accent, #0f766e) 35%, var(--line));
}
.portal-row.current strong::after {
  content: " ✓"; color: var(--accent, #0f766e);
}

/* ── service requests ──────────────────────────────────────────────────────────────────
   The status rail is the piece with real layout in it. Everything else here is the same
   card vocabulary the rest of the portal uses, so a request does not look like a visit to
   a different product.
   ────────────────────────────────────────────────────────────────────────────────────── */

.side-services { margin-block: 0 4px !important; }
.side-services-note { color: var(--muted); font-size: .75rem; line-height: 1.8; margin-block: 0 14px; }

/* the list of requests */
.svc-cards { display: flex; flex-direction: column; gap: 12px; margin-block-start: 16px; }
.svc-card { display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px;
  background: #fff; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.svc-card:hover { border-color: var(--teal); transform: translateY(-1px); }
.svc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.svc-card-title { font-weight: 700; font-size: .95rem; overflow-wrap: anywhere; }
.svc-card-meta { color: var(--muted); font-size: .78rem; margin-block: 6px 10px; }
.svc-card-you { color: var(--teal-dark); font-size: .82rem; margin-block-start: 8px; line-height: 1.8; }

/* progress. The number is always written out beside it: a bar alone is not a status. */
.svc-bar { height: 8px; border-radius: 100px; background: #eee9df; overflow: hidden; margin-block-start: 4px; }
.svc-bar > span { display: block; height: 100%; background: var(--teal); border-radius: 100px; }
.svc-bar-note { color: var(--muted); font-size: .75rem; margin-block: 6px 0; }

/* status pills, tinted by phase — never colour alone, the words are always present */
.pill.svc-start    { background: #eee9df; color: var(--muted); }
.pill.svc-finance  { background: rgba(217,145,23,.14); color: #8a5a04; }
.pill.svc-build    { background: rgba(23,128,138,.12); color: var(--teal-dark); }
.pill.svc-delivery { background: rgba(35,140,72,.14); color: #1c6b39; }
.pill.svc-aside    { background: #f0e2e2; color: #8a3a3a; }

/* choosing a system */
.svc-types { display: grid; grid-template-columns: 1fr; gap: 12px; margin-block-start: 18px; }
@media (min-width: 700px) { .svc-types { grid-template-columns: 1fr 1fr; } }
.svc-type { display: block; padding: 18px; border: 1px solid var(--line); border-radius: 16px;
  background: #fff; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.svc-type:hover { border-color: var(--teal); transform: translateY(-1px); }
.svc-type-icon { font-size: 1.6rem; display: block; margin-block-end: 8px; }
.svc-type-name { font-weight: 700; display: block; }
.svc-type-note { color: var(--muted); font-size: .82rem; display: block; margin-block-start: 6px; line-height: 1.9; }

/* ── the intake form ───────────────────────────────────────────────────────────────────
   Compact on purpose. This form asks up to twenty questions, and at comfortable spacing
   that is four screens of scrolling on a laptop — which reads as "this will take an hour"
   before a single field is filled. Tighter rows, three columns where there is room, and
   the questions that do not apply yet are hidden rather than greyed.
   ────────────────────────────────────────────────────────────────────────────────────── */
.svc-form .lead { margin-block-end: 10px; line-height: 1.8; }
.svc-group { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px 12px; margin-block: 12px 0; }
.svc-group > legend { font-weight: 700; font-size: .82rem; padding-inline: 6px; color: var(--teal-dark); }
.svc-grid { display: grid; grid-template-columns: 1fr; gap: 8px 12px; }
@media (min-width: 620px) { .svc-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 940px) { .svc-grid { grid-template-columns: 1fr 1fr 1fr; } }
/* a hidden question is gone, not greyed: a disabled control still reads as something you
   failed to fill in */
.svc-field[hidden] { display: none; }
.svc-field label { display: block; font-size: .78rem; font-weight: 600; margin-block-end: 4px;
  color: #4a5261; }
/* The base sheet styles only the input types the login form uses. A select left unstyled
   shrinks to its widest option, so a two-column grid comes out ragged — every control in
   this form fills its own cell, whatever it is. */
.svc-field input, .svc-field select, .svc-field textarea {
  width: 100%; max-width: 100%; margin-block-end: 0; box-sizing: border-box;
  /* 40px tall: still a real tap target, two-thirds the height of the old field */
  padding: 8px 11px; border: 1px solid var(--line); border-radius: 10px;
  font: inherit; font-size: .88rem; background: #fff; color: var(--txt);
}
/* The native caret is kept: the browser draws it on the correct side for RTL by itself,
   and a hand-drawn one has to be re-aimed for every direction and zoom level. */
.svc-field select { padding-inline-end: 10px; }
.svc-field select:focus-visible, .svc-field textarea:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.svc-field textarea { min-height: 76px; }
.svc-field .hint { font-size: .72rem; margin-block-start: 3px; line-height: 1.7; }
.svc-checks { display: grid; grid-template-columns: 1fr; gap: 6px 12px; margin-block-start: 8px; }
@media (min-width: 620px) { .svc-checks { grid-template-columns: 1fr 1fr; } }
@media (min-width: 940px) { .svc-checks { grid-template-columns: 1fr 1fr 1fr; } }
/* 44px of height so a checkbox is a real tap target, not a 13px square */
.svc-check { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: .82rem; cursor: pointer; }
.svc-check input { width: 18px; height: 18px; margin: 0; flex: none; }

/* ── the rail ──────────────────────────────────────────────────────────────────────────
   A vertical track with one node per stage. In RTL the line sits at the inline-end edge
   (visually the right), and every node is centred on it, so the eye follows one straight
   edge from «ثبت درخواست» to «تحویل». Logical properties throughout: the same rules give
   a left-hand rail if this is ever rendered LTR.
   ────────────────────────────────────────────────────────────────────────────────────── */

.svc-rail-title { font-size: 1rem; margin-block: 26px 4px; }
.rail { list-style: none; margin: 0; padding: 0; position: relative; }
/* the track itself, drawn behind the nodes and stopping at the first and last one.
   inline-START, which in RTL is the right-hand edge — the side every line of Persian text
   begins from, so the eye already lives there. */
.rail::before {
  content: ""; position: absolute; inset-block: 14px; inset-inline-start: 13px;
  width: 2px; background: var(--line);
}
.rail-step { position: relative; padding-inline-start: 42px; padding-block: 10px; min-height: 44px; }
.rail-node {
  position: absolute; inset-inline-start: 4px; inset-block-start: 12px;
  width: 20px; height: 20px; border-radius: 50%; background: var(--bg);
  border: 2px solid var(--line); display: flex; align-items: center; justify-content: center;
  font-size: .7rem; line-height: 1; color: #fff;
}
.rail-title { font-size: .9rem; font-weight: 700; margin: 0; }
.rail-icon { font-size: .95rem; }
.rail-when { color: var(--muted); font-size: .78rem; margin-block: 4px 0; }
.rail-what { color: var(--muted); font-size: .84rem; line-height: 1.9; margin-block: 6px 0; }
.rail-note { font-size: .84rem; line-height: 1.9; margin-block: 6px 0;
  background: rgba(23,128,138,.08); border-radius: 10px; padding: 8px 10px; }
.rail-you { color: var(--teal-dark); font-weight: 600; font-size: .84rem; line-height: 1.9; margin-block: 6px 0; }

.rail-step.is-done .rail-node { background: var(--teal); border-color: var(--teal); }
.rail-step.is-done .rail-title { color: var(--teal-dark); }
/* the current stage: a filled ring, larger, plus a bold title — three signals, not one */
.rail-step.is-current .rail-node {
  background: #fff; border-color: var(--teal); border-width: 3px;
  width: 24px; height: 24px; inset-inline-start: 2px; inset-block-start: 10px;
  box-shadow: 0 0 0 4px rgba(23,128,138,.15);
}
.rail-step.is-current { background: rgba(23,128,138,.05); border-radius: 12px; }
.rail-step.is-todo .rail-title { color: var(--muted); font-weight: 600; }
.rail-step.is-skipped .rail-node { border-style: dashed; color: var(--muted); }
.rail-step.is-skipped .rail-title { color: var(--muted); font-weight: 500; text-decoration: line-through; }

.svc-aside { background: #f0e2e2; color: #8a3a3a; }

/* what the customer can do right now */
.svc-actions { border: 1px solid var(--teal); border-radius: 14px; padding: 14px 16px; margin-block-start: 16px;
  background: rgba(23,128,138,.05); }
.svc-actions-lead { font-size: .88rem; line-height: 1.9; margin: 0 0 10px; }
.svc-actions .btn { margin-block-start: 0; }
.svc-actions form { display: inline; }

/* the intake, folded away */
.svc-summary { margin-block-start: 24px; border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; }
/* The default disclosure triangle is invisible against this card in RTL, so the affordance
   is drawn explicitly — a folded section nobody realises is foldable is just a dead box. */
.svc-desc { font-size: .86rem; line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere;
  background: #faf8f4; border-radius: 10px; padding: 10px 12px; margin: 0; }
.svc-summary > summary { cursor: pointer; font-weight: 700; font-size: .88rem; min-height: 44px;
  display: flex; align-items: center; gap: 8px; list-style: none; }
.svc-summary > summary::-webkit-details-marker { display: none; }
.svc-summary > summary::before { content: "▾"; color: var(--teal); font-size: .8rem;
  transition: transform .15s; display: inline-block; }
.svc-summary[open] > summary::before { transform: rotate(180deg); }
.svc-sum-group h3 { font-size: .84rem; color: var(--teal-dark); margin-block: 12px 6px; }
.svc-kvs { margin: 0; }
.svc-kv { display: flex; gap: 8px; flex-wrap: wrap; padding-block: 4px; border-block-end: 1px solid var(--line); }
.svc-kv dt { color: var(--muted); font-size: .8rem; min-width: 10rem; }
.svc-kv dd { margin: 0; font-size: .84rem; overflow-wrap: anywhere; }
.svc-addons { margin: 0; padding-inline-start: 18px; font-size: .84rem; line-height: 2; }

/* the comment thread */
.svc-comments { margin-block-start: 28px; padding-block-start: 20px; border-block-start: 1px solid var(--line); }
.svc-comments h2 { font-size: 1rem; }

/* the organisation (holo) code — a standing requirement, not a stage */
.svc-org { margin-block-start: 16px; }
.svc-org--set { color: var(--muted); font-size: .82rem; }
.svc-org-code { font-weight: 700; color: var(--teal-dark); letter-spacing: .04em; }
.svc-org--missing { border: 1px solid #d99117; border-radius: 14px; padding: 14px 16px;
  background: rgba(217,145,23,.07); }
.svc-org--missing h2 { font-size: .95rem; margin-block-end: 6px; }
.svc-org--missing p { font-size: .85rem; line-height: 1.9; color: var(--txt); margin-block-end: 10px; }
.svc-org--missing input { width: 100%; max-width: 260px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px; font: inherit; background: #fff; }

/* money */
/* The quote reads as a document: a heading, then label/value rows aligned down a column,
   the same shape the intake message uses in the thread. */
.svc-money {
  margin-block-start: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfaf7;
}
.svc-money-title {
  margin: 0 0 10px;
  font-size: .92rem;
  padding-block-end: 6px;
  border-block-end: 1px solid var(--line);
}
.svc-money .svc-kv dt { min-width: 8rem; }
.svc-pay-online, .svc-pay-transfer, .svc-pay-history { margin-block-start: 26px;
  padding-block-start: 18px; border-block-start: 1px solid var(--line); }
.svc-pay-online h2, .svc-pay-transfer h2, .svc-pay-history h2 { font-size: 1rem; }
.svc-pay-online .btn { max-width: none; }

/* what DNS says about their domain */
.svc-dns { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-block-start: 14px; }
.svc-dns h2 { font-size: .9rem; margin: 0 0 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.svc-dns-host { font-family: ui-monospace, Menlo, monospace; font-size: .82rem; color: var(--muted); }
.svc-dns p { font-size: .85rem; line-height: 1.9; margin: 0; }
.svc-dns-meta, .svc-dns-help { color: var(--muted); font-size: .78rem; margin-block-start: 6px !important; }
/* «راهنمای تنظیم DNS» is an action, not a footnote: it is the next thing to do when a
   domain is not pointing at us yet. */
.svc-dns-help a { display: inline-flex; align-items: center; min-height: 40px;
  color: var(--teal-dark); font-weight: 600; }
.svc-dns--ok   { border-color: rgba(35,140,72,.45); background: rgba(35,140,72,.06); }
.svc-dns--warn { border-color: rgba(217,145,23,.5);  background: rgba(217,145,23,.07); }
.svc-dns--bad  { border-color: rgba(179,38,30,.35);  background: rgba(179,38,30,.05); }

/* ══ the intake wizard ══════════════════════════════════════════════════════════════════
   Ahmad's journal-registration-wizard design, ported: paper ground, petrol-teal accent,
   brass for «you are here», a numbered rail with a spine joining the markers, one panel
   open at a time, a review before anything is sent.

   Two changes the port required. The reference pulled Vazirmatn from jsDelivr and IBM Plex
   Mono from Google Fonts; this portal self-hosts Vazirmatn and its CSP admits no external
   origin, so the body face is the one already loaded and «mono» is a system stack. And
   everything is scoped under .wizard — the portal's own inputs, buttons and .field rules
   are used by five other pages and must not inherit any of this.
   ═════════════════════════════════════════════════════════════════════════════════════ */

.wizard {
  --paper: #f5f3ee;
  --card: #fff;
  --w-ink: #0f1e1b;
  --w-ink-2: #4e605b;
  --w-ink-3: #7c8c87;
  --w-line: #e2e7e3;
  --w-line-2: #eff1ed;
  --w-accent: #0e7a6b;
  --w-accent-deep: #0a5a4f;
  --w-accent-soft: #e7f3f0;
  --brass: #a8802b;
  --brass-soft: #f7efdd;
  --w-danger: #a8261e;
  --w-danger-soft: #fbedec;
  --w-radius: 14px;
  --w-radius-lg: 22px;
  --rail: 60px;
  --w-shadow: 0 1px 2px rgba(15,30,27,.04), 0 12px 32px rgba(15,30,27,.05);
  --w-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--w-ink);
  font-size: 15px;
  line-height: 1.75;
}

/* masthead */
.wizard .masthead { margin-block-end: 1.2rem; }
.wizard .eyebrow { font-size: .78rem; font-weight: 600; margin: 0 0 .35rem; }
.wizard .eyebrow .back { color: var(--w-accent); }
.wizard h1 { font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.9rem); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.3; margin: 0 0 .35rem; }
.wizard .lede { color: var(--w-ink-2); max-width: 62ch; font-size: .95rem; margin: 0; }

/* sticky progress */
.wizard .progress-bar { position: sticky; top: 0; z-index: 40; margin: 1.2rem 0 1rem;
  background: rgba(250,249,245,.94); backdrop-filter: blur(8px);
  padding: .6rem 0 .55rem; border-block-end: 1px solid var(--w-line); }
.wizard .progress-top { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-block-end: .45rem; }
.wizard .progress-label { font-size: .82rem; font-weight: 600; color: var(--w-ink-2); }
.wizard .progress-label span { color: var(--w-accent-deep); }
.wizard .save-state { font-size: .74rem; color: var(--w-ink-3); display: flex;
  align-items: center; gap: .35rem; font-variant-numeric: tabular-nums; }
.wizard .save-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--w-line);
  transition: background .25s; }
.wizard .save-state[data-state="saving"] .save-dot { background: var(--brass); }
.wizard .save-state[data-state="saved"] .save-dot { background: var(--w-accent); }
.wizard .progress-track { height: 4px; border-radius: 99px; background: var(--w-line); overflow: hidden; }
.wizard .progress-fill { height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(to left, var(--w-accent), var(--w-accent-deep));
  transition: width .45s cubic-bezier(.4,0,.2,1); }

/* the rail — the signature of this design */
.wizard .steps { list-style: none; position: relative; margin: 0; padding: 0; }
.wizard .step { position: relative; display: grid; grid-template-columns: var(--rail) 1fr;
  margin-block-end: .6rem; }
.wizard .step:not(:last-child)::before { content: ""; position: absolute; top: 2.9rem;
  bottom: -.6rem; inset-inline-start: calc(var(--rail) / 2 - 1px); width: 2px; background: var(--w-line); }
.wizard .step.is-done:not(:last-child)::before { background: var(--w-accent); }

.wizard .marker { grid-column: 1; position: relative; z-index: 2; width: 34px; height: 34px;
  margin: .85rem auto 0; border-radius: 50%; display: grid; place-items: center;
  font-size: .85rem; font-weight: 700; background: var(--card); border: 2px solid var(--w-line);
  color: var(--w-ink-3); transition: all .3s ease; }
.wizard .step.is-open .marker { border-color: var(--brass); color: var(--brass);
  box-shadow: 0 0 0 4px var(--brass-soft); }
.wizard .step.is-done .marker { background: var(--w-accent); border-color: var(--w-accent); color: #fff; }
.wizard .marker .tick { display: none; width: 15px; height: 15px; }
.wizard .step.is-done .marker .num { display: none; }
.wizard .step.is-done .marker .tick { display: block; }

.wizard .panel { grid-column: 2; background: var(--card); border: 1px solid var(--w-line);
  border-radius: var(--w-radius-lg); box-shadow: var(--w-shadow); overflow: hidden;
  transition: border-color .25s, opacity .25s; }
.wizard .step.is-locked .panel { background: transparent; box-shadow: none;
  border-style: dashed; opacity: .7; }
.wizard .step.is-open .panel { border-color: #cfddd8; }

.wizard .panel-head { display: flex; align-items: center; gap: .75rem; width: 100%;
  text-align: start; padding: 1rem 1.25rem; background: none; border: 0; font: inherit;
  color: inherit; cursor: pointer; }
.wizard .step.is-locked .panel-head, .wizard .panel-head:disabled { cursor: not-allowed; }
.wizard .head-text { flex: 1; min-width: 0; }
.wizard .head-title { display: block; font-weight: 700; font-size: 1rem; letter-spacing: -.01em; }
.wizard .step.is-locked .head-title { color: var(--w-ink-3); font-weight: 600; }
.wizard .head-sub { display: block; font-size: .82rem; color: var(--w-ink-2);
  margin-block-start: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wizard .step.is-locked .head-sub { color: var(--w-ink-3); }
.wizard .head-action { font-size: .78rem; font-weight: 600; color: var(--w-accent);
  border: 1px solid var(--w-accent-soft); background: var(--w-accent-soft);
  padding: .2rem .8rem; border-radius: 99px; flex-shrink: 0; }
.wizard .step.is-locked .head-action, .wizard .step.is-open .head-action { display: none; }
.wizard .lock-icon { flex-shrink: 0; color: var(--w-ink-3); display: none; }
.wizard .step.is-locked .lock-icon { display: block; }

/* Closed by default and opened by the step machine — but only when the machine exists.
   Without JavaScript every panel stays open and the whole form is one page, which is the
   fallback the markup is built around. */
.wizard .panel-body { padding: 0 1.25rem 1.35rem; border-block-start: 1px solid var(--w-line-2); }
.wizard.has-js .panel-body { display: none; }
.wizard.has-js .step.is-open .panel-body { display: block; animation: wiz-reveal .3s cubic-bezier(.4,0,.2,1); }
@keyframes wiz-reveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* fields */
.wizard .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.5rem; padding-block-start: 1.25rem; }
.wizard .field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.wizard .field.wide { grid-column: 1 / -1; }
.wizard .field[hidden] { display: none; }
.wizard label { display: block; font-size: .85rem; font-weight: 600; color: var(--w-ink); margin: 0; }
.wizard .req { color: var(--brass); margin-inline-start: 2px; }
.wizard .opt { font-weight: 400; font-size: .72rem; color: var(--w-ink-3); margin-inline-start: .35rem; }

.wizard input, .wizard select, .wizard textarea {
  width: 100%; max-width: 100%; box-sizing: border-box; margin: 0;
  padding: .62rem .85rem; font: inherit; font-size: .92rem; color: var(--w-ink);
  background: #fcfdfc; border: 1px solid var(--w-line); border-radius: var(--w-radius);
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.wizard select { appearance: none; cursor: pointer; padding-inline-end: 2.1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%237C8C87' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left .9rem center; }
.wizard input:hover, .wizard select:hover { border-color: #cbd8d3; }
.wizard input:focus, .wizard select:focus, .wizard textarea:focus {
  outline: none; background: #fff; border-color: var(--w-accent);
  box-shadow: 0 0 0 3px var(--w-accent-soft); }
.wizard input::placeholder, .wizard textarea::placeholder { color: #a9b5b1; }
.wizard .mono { font-family: var(--w-mono); font-size: .86rem; letter-spacing: .01em; }
.wizard input[dir="ltr"] { text-align: left; }
.wizard .hint { font-size: .74rem; color: var(--w-ink-3); line-height: 1.6; margin: 0; }
.wizard .error { font-size: .76rem; color: var(--w-danger); font-weight: 500;
  display: none; align-items: center; gap: .3rem; margin: 0; }
.wizard .field.has-error input, .wizard .field.has-error select,
.wizard .field.has-error textarea { border-color: var(--w-danger); background: var(--w-danger-soft); }
.wizard .field.has-error .error { display: flex; }
.wizard .field.has-error .hint { display: none; }

.wizard .sub-head { grid-column: 1 / -1; display: flex; align-items: center; gap: .6rem;
  margin-block-start: 1.2rem; font-size: .76rem; font-weight: 700; letter-spacing: .06em;
  color: var(--w-ink-3); }
.wizard .sub-head::after { content: ""; flex: 1; height: 1px; background: var(--w-line-2); }

.wizard .checks { display: grid; grid-template-columns: 1fr; gap: .1rem; }
@media (min-width: 620px) { .wizard .checks { grid-template-columns: 1fr 1fr; } }
.wizard .check { display: flex; align-items: center; gap: .55rem; min-height: 40px;
  font-size: .85rem; font-weight: 400; cursor: pointer; }
.wizard .check input { width: 17px; height: 17px; flex: none; padding: 0; }

/* step footer */
.wizard .panel-foot { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  margin-block-start: 1.4rem; padding-block-start: 1.1rem; border-block-start: 1px solid var(--w-line-2); }
.wizard .spacer { flex: 1; }
.wizard .btn { width: auto; max-width: none; margin: 0; border: 1px solid transparent;
  border-radius: 99px; padding: .6rem 1.7rem; font: inherit; font-size: .9rem;
  font-weight: 600; cursor: pointer; transition: .18s; }
.wizard .btn-primary { background: var(--w-accent-deep); color: #fff; }
.wizard .btn-primary:hover { background: #084a41; }
.wizard .btn-ghost { background: transparent; color: var(--w-ink-2); border-color: var(--w-line); }
.wizard .btn-ghost:hover { background: var(--w-line-2); color: var(--w-ink); }
.wizard .btn-quiet { background: none; border: 0; color: var(--w-ink-3); font: inherit;
  font-size: .82rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
  /* it is a destructive action in a form full of them; it still has to be pressable */
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 4px; }
.wizard .btn-quiet:hover { color: var(--w-danger); }
.wizard .btn:focus-visible, .wizard .panel-head:focus-visible, .wizard .btn-quiet:focus-visible {
  outline: 2px solid var(--w-accent); outline-offset: 2px; }

/* review */
.wizard .review { padding-block-start: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.wizard .review-group { border: 1px solid var(--w-line); border-radius: var(--w-radius); overflow: hidden; }
.wizard .review-group-head { display: flex; justify-content: space-between; align-items: center;
  padding: .55rem .95rem; background: #f8faf9; border-block-end: 1px solid var(--w-line-2); }
.wizard .review-group-head h3 { font-size: .85rem; font-weight: 700; margin: 0; }
.wizard .review-group-head button { background: none; border: 0; font: inherit; font-size: .78rem;
  color: var(--w-accent); cursor: pointer; font-weight: 600; }
.wizard .review-group-head button:hover { text-decoration: underline; }
.wizard .review dl { margin: 0; }
.wizard .review-row { display: flex; gap: 1rem; padding: .5rem .95rem; font-size: .85rem;
  border-block-end: 1px solid var(--w-line-2); }
.wizard .review-row:last-child { border-block-end: 0; }
.wizard .review-row dt { color: var(--w-ink-2); flex: 0 0 42%; max-width: 220px; }
.wizard .review-row dd { font-weight: 600; flex: 1; min-width: 0; word-break: break-word; margin: 0; }
.wizard .review-row dd.empty { font-weight: 400; color: var(--w-ink-3); }

.wizard .callout { display: block; background: var(--brass-soft); border: 1px solid #ebddbf;
  border-radius: var(--w-radius); padding: .85rem 1rem; font-size: .84rem; color: #6a5416;
  margin-block-start: 1.2rem; }

/* toast */
.wizard .toast { position: fixed; bottom: 1.5rem; inset-inline-start: 1.5rem; z-index: 100;
  background: var(--w-ink); color: #fff; padding: .65rem 1.4rem; border-radius: 99px;
  font-size: .85rem; font-weight: 500; box-shadow: 0 10px 30px rgba(15,30,27,.22);
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .25s, transform .25s; }
.wizard .toast.show { opacity: 1; transform: none; }

@media (max-width: 720px) {
  .wizard { --rail: 0px; }
  .wizard .step { grid-template-columns: 1fr; }
  .wizard .step::before { display: none; }
  .wizard .marker { position: absolute; top: 1.05rem; inset-inline-end: 1.1rem;
    width: 26px; height: 26px; font-size: .75rem; margin: 0; }
  .wizard .panel { grid-column: 1; }
  .wizard .panel-head { padding-inline-end: 3rem; }
  .wizard .grid { grid-template-columns: 1fr; }
  /* Stack, do not share a row. «ذخیره و ادامه» beside the reset link left it a column
     narrow enough to break the label across two lines. */
  .wizard .panel-foot { flex-direction: column; align-items: stretch; }
  .wizard .panel-foot .btn { flex: none; width: 100%; text-align: center; }
  .wizard .panel-foot .spacer { display: none; }
  .wizard .btn-quiet { justify-content: center; }
  .wizard .review-row { flex-direction: column; gap: .1rem; }
  .wizard .review-row dt { flex: none; max-width: none; }
}

/* The wizard beside the quick-access column.
   Column 1 is the RIGHT edge in RTL, and that is where the tools live on every other page
   — so they are placed there explicitly, exactly as .shell--thread does it. Below the
   breakpoint everything stacks in markup order: the form first, the tools under it, where
   they are still reachable and no longer competing with a five-step form for attention. */
.shell--wizard { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 1180px) {
  .shell--wizard { grid-template-columns: minmax(var(--side-min), var(--side-max)) minmax(0, 1fr); }
  .shell--wizard .side--tools { grid-column: 1; grid-row: 1; }
  .shell--wizard .wizard { grid-column: 2; grid-row: 1; min-width: 0; }
}

/* Two ways out of the wizard, weighted. «بازگشت به پورتال پشتیبانی» is the one people
   want — it lands on their own support inbox — and «تغییر نوع سامانه» stays beside it so
   somebody who picked the wrong system is not stuck starting again from the address bar. */
.wizard .eyebrow { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.wizard .eyebrow-sep { color: var(--w-ink-3); }
.wizard .back--quiet { color: var(--w-ink-3); font-weight: 400; }
.wizard .back--quiet:hover { color: var(--w-accent); }

/* The two starting actions, at the head of the quick-access column. They are the only
   things in it that are OURS — everything below opens a different site in a new tab — so
   a rule separates them rather than letting them read as two more links in the list. */
.side-actions { display: flex; flex-direction: column; margin-block-end: 16px;
  padding-block-end: 14px; border-block-end: 1px solid var(--line); }
.side-actions .btn { width: 100%; max-width: none; margin: 0 0 8px; padding: 10px 14px;
  font-size: .88rem; }
.side-actions .btn:last-of-type { margin-block-end: 0; }
.side-actions .side-services-note { margin-block: 8px 0; }

/* a quote waiting to be approved, in the always-visible column */
.side-quote { display: block; margin-block-start: 12px; padding: 10px 12px;
  border: 1px solid #d99117; border-radius: 12px; background: rgba(217,145,23,.08);
  text-decoration: none; color: inherit; }
.side-quote:hover { background: rgba(217,145,23,.14); }
.side-quote-title { display: block; font-weight: 700; font-size: .8rem; color: #8a5a04; }
.side-quote-name { display: block; font-size: .76rem; color: var(--muted);
  margin-block-start: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-quote-cta { display: block; font-size: .76rem; font-weight: 600; color: var(--teal-dark);
  margin-block-start: 6px; }

/* approving is a tick and then a submit, never one button */
.svc-confirm { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.svc-confirm-check { display: flex; align-items: flex-start; gap: 9px; cursor: pointer;
  font-size: .86rem; line-height: 1.9; min-height: 44px; }
.svc-confirm-check input { width: 18px; height: 18px; margin-block-start: 5px; flex: none; }
.svc-confirm .btn { margin: 0; }

/* ── a request row, with its stages folded underneath ──────────────────────────────── */
/* The way into a request from the list — on a phone it is the thing a thumb aims at, so
   it gets a target height even though it reads as a heading. */
.svc-card-title { font-weight: 700; font-size: .95rem; overflow-wrap: anywhere;
  color: inherit; text-decoration: none; display: inline-flex; align-items: center;
  min-height: 40px; }
.svc-card-title:hover { color: var(--teal-dark); text-decoration: underline; }
.svc-card-money { font-size: .82rem; color: var(--muted); margin-block-start: 8px; }

.svc-card-more { margin-block-start: 10px; border-block-start: 1px solid var(--line);
  padding-block-start: 8px; }
.svc-card-more > summary { cursor: pointer; font-size: .8rem; font-weight: 600;
  color: var(--teal-dark); min-height: 44px; display: flex; align-items: center; gap: 6px;
  list-style: none; }
.svc-card-more > summary::-webkit-details-marker { display: none; }
.svc-card-more > summary::before { content: "▾"; font-size: .7rem; display: inline-block;
  transition: transform .15s; }
.svc-card-more[open] > summary::before { transform: rotate(180deg); }

/* The same rail as the request page, at list scale: smaller nodes, tighter rows, no
   prose — the list is for scanning, and the full explanation is one click further in. */
.rail--compact { margin-block-start: 4px; }
.rail--compact::before { inset-block: 10px; inset-inline-start: 9px; }
.rail--compact .rail-step { padding-inline-start: 30px; padding-block: 5px; min-height: 0; }
.rail--compact .rail-node { width: 15px; height: 15px; inset-inline-start: 2px;
  inset-block-start: 7px; font-size: .55rem; border-width: 1.5px; }
.rail--compact .step.is-current .rail-node, .rail--compact .rail-step.is-current .rail-node {
  width: 17px; height: 17px; inset-inline-start: 1px; inset-block-start: 6px;
  border-width: 2px; box-shadow: 0 0 0 3px rgba(23,128,138,.15); }
.rail--compact .rail-title { font-size: .82rem; font-weight: 600; }
.rail--compact .rail-when { font-size: .72rem; }
.rail--compact .rail-note { font-size: .78rem; padding: 6px 8px; }
.rail--compact .rail-step.is-current { background: none; }

.svc-card-actions { margin-block-start: 12px; gap: 8px; }
/* .row makes its buttons grow to fill; here they should be the size of their words, or a
   row with one action turns into a full-width bar that reads like the primary act. */
.svc-card-actions .btn { width: auto; max-width: none; margin: 0; flex: 0 0 auto; }

/* ── the two start-here actions, on a phone ────────────────────────────────────────────
   They live in the sidebar, which stacks under the page on a narrow screen — so on a long
   thread they were below everything. This copy sits under the brand instead, and exists
   only while the sidebar is stacked: above the breakpoint it is display:none, which also
   removes it from the accessibility tree so the two links are never announced twice.
   ────────────────────────────────────────────────────────────────────────────────────── */
.mobile-actions { display: flex; gap: 8px; width: 100%; }
.mobile-actions .btn { flex: 1 1 0; width: auto; max-width: none; margin: 0;
  padding: 10px 12px; font-size: .85rem; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; text-align: center; }
@media (min-width: 1180px) { .mobile-actions { display: none; } }
/* …and below it, the sidebar's own copy stands down. Exactly one of the two is ever in
   the document, so the pair is never announced twice or tabbed through twice. */
@media (max-width: 1179px) { .side-actions { display: none; } }

/* The header becomes two rows once the actions join it: brand and tools, then the buttons. */
@media (max-width: 1179px) {
  .top { flex-wrap: wrap; row-gap: 10px; }
  .top .toolbar { order: 3; width: 100%; }
  .mobile-actions { order: 2; }
}

/* The live domain verdict under «دامنهٔ نهایی سامانه». It answers two questions the form
   used to ask, so it has to read as an answer — not as a validation error and not as a
   hint that was always there. Tone carries the meaning; the detail line under it carries
   the nameservers, the current address and the registry expiry. */
.wizard .dom-check {
  margin: .45rem 0 0; padding: .5rem .7rem; border-radius: 10px;
  font-size: .8rem; line-height: 1.75; border: 1px solid transparent;
}
.wizard .dom-check .dom-detail { color: var(--w-ink-3); font-size: .74rem; direction: ltr; unicode-bidi: isolate; }
.wizard .dom-good { background: #e8f6ee; border-color: #bfe3cd; color: #17603a; }
.wizard .dom-warn { background: #fdf1e3; border-color: #f2d6b2; color: #8a4b12; }
.wizard .dom-info { background: #eef3f6; border-color: #d3e0e6; color: #2b5560; }

/* Wide screens: the shell grew, so the things inside it that are read rather than filled in
   get their own ceiling. Without this the lead line under a request title runs the full
   1,150px of the main column and the eye loses the start of the next line. */
@media (min-width: 1180px) {
  .card > .lead,
  .svc-org--missing > p,
  .wizard .lede { max-width: 78ch; }
}

/* An intake message rendered as the form it is: section rules become headings, «label:
   value» becomes two columns. The label column is fixed so the answers line up down the
   page — that alignment is the whole point, since it is what lets an agent find one field
   without reading thirty. */
.msg-body .intake-sec {
  margin: 14px 0 6px; font-size: .82rem; font-weight: 700; color: var(--accent);
  padding-block-end: 4px; border-block-end: 1px solid var(--line);
}
.msg-body .intake-sec:first-child { margin-block-start: 2px; }
.msg-body .intake { margin: 0; display: grid; gap: 2px; }
.msg-body .intake-row {
  display: grid; grid-template-columns: minmax(0, 11.5rem) minmax(0, 1fr);
  gap: 4px 12px; padding: 3px 0; align-items: baseline;
}
.msg-body .intake-row dt { color: var(--muted); font-size: .78rem; }
.msg-body .intake-row dd { margin: 0; font-size: .84rem; }
@media (max-width: 620px) {
  .msg-body .intake-row { grid-template-columns: 1fr; gap: 0; padding: 5px 0; }
  .msg-body .intake-row dt { font-size: .72rem; }
}

/* «مشخصات من» in the sidebar: what will appear on their invoice, where they can see it is
   wrong. Quiet by design — it is a reference block, not an action — except when something
   is missing, which is the one state that needs to catch the eye. */
.side-profile { border-block-start: 1px solid var(--line); margin-block-start: 14px; padding-block-start: 14px; }
.side-profile h2 { margin: 0 0 8px; font-size: .86rem; }
.side-profile-list { margin: 0; display: grid; gap: 4px; }
.side-profile-row { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: 8px; align-items: baseline; }
.side-profile-row dt { color: var(--muted); font-size: .72rem; }
.side-profile-row dd { margin: 0; font-size: .78rem; overflow-wrap: anywhere; }
.side-profile-warn {
  margin: 10px 0 0; padding: 7px 9px; border-radius: 8px; font-size: .74rem;
  background: #fdf1e3; border: 1px solid #f2d6b2; color: #8a4b12;
}
.side-profile-edit {
  display: inline-block; margin-block-start: 10px; font-size: .78rem;
  color: var(--accent); text-decoration: none;
}
.side-profile-edit:hover { text-decoration: underline; }

/* The profile form itself. Two columns where the answers are short, one where they are not. */
.pf .pf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 18px; }
.pf .pf-field.wide { grid-column: 1 / -1; }
.pf .pf-field label { display: block; margin-block-end: 6px; font-size: .82rem; font-weight: 600; }
.pf .pf-field input, .pf .pf-field select, .pf .pf-field textarea {
  width: 100%; box-sizing: border-box; padding: 11px 13px; font: inherit;
  border: 1px solid var(--line); border-radius: 10px; background: #fff; color: inherit;
}
.pf .pf-field.has-error input, .pf .pf-field.has-error textarea { border-color: #c0392b; }
.pf .pf-field .hint { margin: 5px 0 0; font-size: .74rem; color: var(--muted); }
.pf .pf-field .err { margin: 5px 0 0; font-size: .76rem; color: #c0392b; }
.pf .pf-why { margin-block-start: 16px; }
/* The honorific is a one-word answer beside two name boxes, not a third full-width column. */
.pf .pf-title { max-width: 10rem; }

/* One person, one line: honorific, given name, family name. The honorific column is fixed
   and narrow because it holds one word, and the two names share what is left. It spans the
   step's whole grid so the three never wrap around a neighbouring field. */
.wizard .field-row {
  grid-column: 1 / -1;
  display: grid;
  gap: 4px 14px;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
.wizard .field-row .row-title {
  grid-column: 1 / -1;
  margin: 2px 0 2px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--w-ink-2);
}
.wizard .field-row .field { margin: 0; }
@media (max-width: 720px) {
  .wizard .field-row { grid-template-columns: 1fr; }
}