/* SMS customer workbench · aligned with the agent customer template. */

#workspace .primary {
  border-radius: var(--radius-sm);
  background: var(--blue);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--blue) 22%, transparent);
}

#workspace .primary:not(:disabled):hover {
  background: var(--blue-dark);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--blue) 28%, transparent);
}

#workspace .secondary,
#workspace .help-button,
#workspace .tutorial-action,
#workspace .code-help {
  transition:
    transform var(--fast) var(--ease),
    border-color var(--base) var(--ease),
    background var(--base) var(--ease),
    color var(--base) var(--ease),
    box-shadow var(--base) var(--ease);
}

#workspace .secondary:not(:disabled):hover,
#workspace .help-button:hover,
#workspace .tutorial-action:hover,
#workspace .code-help:hover {
  border-color: color-mix(in srgb, var(--blue) 42%, var(--line));
  background: var(--blue-soft);
  color: var(--blue-dark);
}

#workspace .member-question summary::after {
  width: var(--space-xs);
  height: var(--space-xs);
  flex: 0 0 var(--space-xs);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  content: "";
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--base) var(--ease);
}

#workspace .member-question[open] summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

#workspace .member-question summary:hover {
  color: var(--blue-dark);
}

#workspace .member-question[open] {
  background: color-mix(in srgb, var(--blue-soft) 52%, transparent);
}

#workspace .member-question[open] summary,
#workspace .member-question[open] .member-question-body {
  padding-inline: var(--space-xs);
}

@media (min-width: 1180px) {
  .page {
    width: min(calc(100% - (var(--space-xl) * 2)), 1380px);
    padding: var(--space-lg) 0 var(--space-xl);
  }

  #workspace {
    grid-template-columns: minmax(0, 1.48fr) minmax(480px, 1fr);
    grid-template-rows: auto auto 1fr;
    gap: var(--space-md);
    align-items: stretch;
  }

  #workspace > .brand-row {
    grid-column: 1 / -1;
    min-height: 82px;
    padding: var(--space-sm) var(--space-lg);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--paper) 96%, var(--blue-soft));
    box-shadow: var(--shadow-soft);
  }

  #workspace > .tutorial {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    border-radius: var(--radius-md);
  }

  #workspace > .tutorial summary {
    min-height: 68px;
    padding: var(--space-sm) var(--space-md);
  }

  #workspace > .tutorial h2 {
    margin: var(--space-3xs) 0 0;
    font-size: var(--text-base);
  }

  #workspace > .tutorial p {
    overflow: hidden;
    max-width: 60ch;
    margin-top: var(--space-3xs);
    font-size: var(--text-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #workspace > .tutorial video {
    width: calc(100% - (var(--space-md) * 2));
    max-height: 360px;
    margin: 0 var(--space-md) var(--space-md);
  }

  #workspace > .number-card {
    display: grid;
    grid-column: 1;
    grid-row: 3;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto auto auto auto;
    column-gap: var(--space-md);
    row-gap: 0;
    padding: var(--space-md);
    border-radius: var(--radius-md);
  }

  .number-card > .number-head,
  .number-card > .steps,
  .number-card > #workNotice,
  .number-card > #afterCodeHelp {
    grid-column: 1 / -1;
  }

  .number-card > .number-head {
    min-height: 52px;
    margin: calc(var(--space-xs) * -1) calc(var(--space-xs) * -1) 0;
    border-radius: var(--radius-sm);
    padding: var(--space-xs) var(--space-sm);
    background: var(--paper-soft);
  }

  .number-card .network-reminder {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: var(--space-3xs) var(--space-md);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .number-card .network-reminder li {
    position: relative;
    padding-inline-start: var(--space-sm);
    color: var(--muted);
    line-height: 1.45;
  }

  .number-card .network-reminder li::before {
    position: absolute;
    top: .52em;
    left: 0;
    width: var(--space-2xs);
    height: var(--space-2xs);
    border-radius: 50%;
    content: "";
    background: var(--blue);
  }

  .number-card > .steps {
    margin: var(--space-sm) 0 var(--space-md);
  }

  .number-card > h2 {
    grid-column: 1;
    grid-row: 3;
    margin: 0;
    padding: var(--space-sm) var(--space-sm) 0;
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    background: var(--paper);
    color: var(--blue-dark);
    font-size: var(--text-base);
    font-weight: 850;
  }

  .number-card > .number-line {
    grid-column: 1;
    grid-row: 4;
    min-height: 96px;
    padding: var(--space-xs) var(--space-sm);
    border-inline: 1px solid var(--line);
    background: var(--paper);
  }

  .number-card > .number-line .number {
    font-size: clamp(2rem, 3vw, 3.25rem);
  }

  .number-card > .details {
    grid-column: 1;
    grid-row: 5;
    margin: 0;
    padding: 0 var(--space-sm) var(--space-sm);
    border-inline: 1px solid var(--line);
    background: var(--paper);
  }

  .number-card > .actions {
    grid-column: 1;
    grid-row: 6;
    margin: 0;
    padding: 0 var(--space-sm) var(--space-sm);
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    background: var(--paper);
  }

  .number-card > .sms {
    display: flex;
    grid-column: 2;
    grid-row: 3 / 7;
    min-height: 100%;
    flex-direction: column;
    margin: 0;
    border-color: color-mix(in srgb, var(--blue) 26%, var(--line));
    background: color-mix(in srgb, var(--blue-soft) 72%, var(--paper));
  }

  .number-card > .sms .sms-head {
    padding: var(--space-sm) var(--space-md);
    background: transparent;
  }

  .number-card > .sms .sms-code {
    display: grid;
    min-height: 160px;
    flex: 1;
    place-items: center;
    padding: var(--space-lg) var(--space-md);
    color: var(--blue-dark);
    font-size: clamp(2.5rem, 4vw, 3.75rem);
  }

  .number-card > #workNotice {
    grid-row: 7;
  }

  .number-card > #afterCodeHelp {
    grid-row: 8;
  }

  #workspace > .aftercare {
    grid-column: 2;
    grid-row: 2 / 4;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--paper) 94%, var(--blue-soft));
  }

  #workspace > .aftercare > h2 {
    max-width: none;
    margin: 0;
    color: var(--ink);
    font-size: var(--text-md);
    letter-spacing: -.02em;
  }

  #workspace > .aftercare > .subtitle {
    margin-top: var(--space-2xs);
    font-size: var(--text-xs);
    line-height: 1.55;
  }

  #workspace > .aftercare > .gift {
    margin: var(--space-sm) 0 var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-xs);
  }

  #workspace > .aftercare > .benefits {
    gap: var(--space-2xs);
    margin-bottom: var(--space-sm);
  }

  #workspace > .aftercare > .benefits span {
    padding: var(--space-2xs) var(--space-xs);
    font-size: .75rem;
  }

  #workspace .aftercare-split {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    grid-template-areas:
      "contact-title member-head"
      "contact-note member-title"
      "contact-wechat member-copy"
      "contact-qr member-facts"
      "remote remote"
      "questions questions";
    gap: var(--space-xs) var(--space-sm);
    border: 0;
  }

  #workspace .aftercare-split > .contact,
  #workspace .aftercare-split > .member-service {
    display: contents;
  }

  #workspace .contact > h3 {
    grid-area: contact-title;
  }

  #workspace .contact > .contact-note {
    grid-area: contact-note;
  }

  #workspace .contact > .wechat {
    grid-area: contact-wechat;
  }

  #workspace .contact > .qr-area {
    grid-area: contact-qr;
  }

  #workspace .contact > .assist-service {
    grid-area: remote;
  }

  #workspace .member-service > .member-head {
    grid-area: member-head;
  }

  #workspace .member-service > .member-title-row {
    grid-area: member-title;
  }

  #workspace .member-service > p {
    grid-area: member-copy;
  }

  #workspace .member-service > .member-facts {
    grid-area: member-facts;
  }

  #workspace .member-service > .member-questions {
    grid-area: questions;
  }

  #workspace .contact h3,
  #workspace .member-service h3 {
    align-self: end;
    font-size: var(--text-base);
  }

  #workspace .contact-note,
  #workspace .member-service > p {
    margin: 0;
    font-size: .75rem;
  }

  #workspace .wechat {
    align-self: start;
    padding: var(--space-xs);
  }

  #workspace .wechat .secondary {
    min-height: 40px;
  }

  #workspace .qr-area {
    display: flex;
    min-height: 136px;
    align-items: center;
    gap: var(--space-xs);
    margin: 0;
    text-align: left;
  }

  #workspace .qr-frame {
    width: 128px;
    height: 128px;
    flex: 0 0 128px;
    margin: 0;
  }

  #workspace .member-head {
    align-items: center;
  }

  #workspace .member-title-row {
    margin: 0;
  }

  #workspace .member-title-row strong {
    font-size: var(--text-sm);
  }

  #workspace .member-facts {
    margin: 0;
  }

  #workspace .member-facts > div {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: var(--space-xs);
    padding: var(--space-xs) 0;
  }

  #workspace .assist-service {
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr);
    column-gap: var(--space-md);
    margin: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: var(--space-sm);
    background: var(--paper);
  }

  #workspace .assist-service > h4,
  #workspace .assist-service > p {
    grid-column: 1;
  }

  #workspace .assist-service > h4 {
    align-self: end;
  }

  #workspace .assist-service > .assist-list {
    grid-column: 2;
    grid-row: 1 / 4;
    margin: 0;
  }

  #workspace .assist-list li {
    grid-template-columns: 68px minmax(0, 1fr);
    padding: var(--space-2xs) 0;
  }

  #workspace .assist-service > .assist-note {
    margin: var(--space-xs) 0 0;
    padding-top: var(--space-xs);
    font-size: .7rem;
  }

  #workspace .member-questions {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 0;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 0 var(--space-sm);
    background: var(--paper);
  }

  #workspace .member-question:not([open]) summary {
    height: auto;
  }

  #workspace .member-question summary {
    min-height: 44px;
    padding: var(--space-xs) 0;
  }
}

@media (min-width: 1180px) and (max-height: 760px) {
  .page {
    padding-top: var(--space-sm);
  }

  #workspace {
    gap: var(--space-sm);
  }

  #workspace > .brand-row {
    min-height: 60px;
    padding-block: var(--space-xs);
  }

  #workspace > .tutorial summary {
    min-height: 48px;
    padding-block: var(--space-xs);
  }

  #workspace > .tutorial p {
    display: none;
  }

  .number-card > .steps {
    margin-block: var(--space-2xs) var(--space-xs);
  }

  .number-card .step {
    gap: var(--space-3xs);
    font-size: .7rem;
  }

  .number-card .step-dot {
    width: 26px;
    height: 26px;
  }

  .number-card .step:not(:last-child)::after {
    top: 12px;
  }

  #workspace > .number-card {
    padding: var(--space-sm);
  }

  .number-card > .number-head {
    min-height: 44px;
  }

  .number-card > h2 {
    padding-top: var(--space-xs);
    font-size: var(--text-sm);
  }

  .number-card > .number-line {
    min-height: 64px;
    padding-block: var(--space-2xs);
  }

  .number-card > .number-line .number {
    font-size: clamp(1.8rem, 2.6vw, 2.6rem);
  }

  .number-card > .details {
    gap: var(--space-xs);
    padding-bottom: var(--space-xs);
  }

  .number-card > .details .detail {
    padding: var(--space-xs);
  }

  .number-card > .actions {
    gap: var(--space-xs);
    padding-bottom: var(--space-xs);
  }

  .number-card > .actions .primary,
  .number-card > .actions .secondary {
    min-height: 44px;
  }

  .number-card > .sms .sms-head {
    gap: var(--space-2xs);
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-sm);
  }

  .number-card > .sms .number-rule {
    padding-top: var(--space-2xs);
    font-size: .75rem;
  }

  .number-card > .sms .sms-code {
    min-height: 104px;
    padding: var(--space-sm);
  }

  .number-card > #workNotice {
    min-height: 40px;
    margin-top: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    font-size: .75rem;
  }

  .number-card > #afterCodeHelp {
    min-height: 44px;
    margin-top: var(--space-xs);
  }

  #workspace > .aftercare {
    padding: var(--space-sm);
  }

  #workspace > .aftercare > h2 {
    font-size: var(--text-base);
  }

  #workspace > .aftercare > .subtitle {
    line-height: 1.4;
  }

  #workspace > .aftercare > .gift {
    margin-block: var(--space-xs) var(--space-2xs);
    padding-block: var(--space-2xs);
  }

  #workspace > .aftercare > .benefits {
    margin-bottom: var(--space-xs);
  }

  #workspace .aftercare-split {
    gap: var(--space-2xs) var(--space-xs);
  }

  #workspace .qr-area {
    min-height: 92px;
  }

  #workspace .qr-frame {
    width: 88px;
    height: 88px;
    flex-basis: 88px;
  }

  #workspace .member-facts > div {
    padding: var(--space-2xs) 0;
  }

  #workspace .assist-service {
    grid-template-columns: 132px minmax(0, 1fr);
    column-gap: var(--space-sm);
    padding: var(--space-xs);
  }

  #workspace .assist-service > p,
  #workspace .assist-list span {
    line-height: 1.35;
  }

  #workspace .assist-list li {
    padding: var(--space-3xs) 0;
  }

  #workspace .assist-service > .assist-note {
    margin-top: var(--space-2xs);
    padding-top: var(--space-2xs);
  }

  #workspace .member-question summary {
    min-height: 38px;
    padding: var(--space-2xs) 0;
  }
}

@media (max-width: 1179px) {
  #workspace button,
  #workspace .tutorial summary {
    min-height: 44px;
  }

  #workspace > .number-card {
    display: block;
  }

  #workspace .aftercare-split > .contact,
  #workspace .aftercare-split > .member-service {
    display: block;
  }
}

@media (max-width: 600px) {
  #workspace button {
    min-height: 44px;
  }

  #workspace > .brand-row {
    padding: var(--space-xs);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--paper);
    box-shadow: var(--shadow-soft);
  }

  #workspace > .tutorial h2 {
    font-size: var(--text-base);
  }

  #workspace > .tutorial p {
    font-size: var(--text-xs);
  }

  #workspace > .number-card {
    padding: var(--space-md);
  }

  #workspace > .number-card .number {
    font-size: clamp(2.25rem, 12vw, 3.5rem);
  }

  #workspace > .aftercare {
    padding: var(--space-md);
  }

  #workspace > .aftercare > h2 {
    font-size: var(--text-md);
  }
}