/* Production controls keep their established IDs and behavior in the new shell. */
/* Homepage accent ownership stays with the reviewed separator-only styling. */
.website-field { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.service-panel .row { display: flex; gap: 10px; align-items: stretch; margin-bottom: 18px; }
.service-panel .row input { flex: 1; min-width: 0; }
.service-panel button:not(.inline-action), .service-panel .download-button, .service-panel a.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px;
  padding: 13px 18px; border: 1px solid var(--ink); border-radius: 0; background: var(--ink); color: var(--bg); font: 11px/1.6 Mono, monospace;
}
.service-panel button:disabled { opacity: .5; cursor: wait; }
.service-panel button.quiet, .service-panel button.text-button { background: transparent; color: var(--ink); border-color: var(--line); margin-block: 10px; }
.service-panel label.remember, .service-panel label.marketing-choice { display: flex; align-items: flex-start; gap: 10px; margin-top: 20px; font-size: 12px; }
.service-panel p.detail, .service-panel p.fine, #status, #updates-status, #checkout-updates-status { font: 11px/1.8 Mono, monospace; color: var(--muted); margin-block: 16px; overflow-wrap: anywhere; }
#checkout-form .fine, #signin .detail, #account .detail { font-size: 11px; }
.service-panel #registered { font-size: 18px; overflow-wrap: anywhere; }
.service-panel #account > section, .service-panel #account > details { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 20px; }
.service-panel summary { font: 12px/1.6 Mono, monospace; padding-block: 14px; }
.service-panel #installer { display: flex; flex-direction: column; align-items: stretch; }
.service-panel #installer a { min-height: 52px; }
.service-panel #computer-count { display: block; color: var(--muted); font-size: 10px; }
/* These spans are a label accent and live count, not rotating disclosure marks. */
.service-panel .computers-panel > summary { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.service-panel .computers-panel > summary > span { transform: none; }
.service-panel .computers-panel > summary > .section-slash { font-size: inherit; }
.service-panel .computers-panel #computer-count { white-space: nowrap; }
.computer-row { display: flex; gap: 12px; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); padding-block: 16px; }
.computer-row .computer-name { font-size: 16px; overflow-wrap: anywhere; }
.computer-row button { flex: none; }
#status[data-error="true"] { color: var(--ink); }
#next-steps, #state { margin-block: 24px; padding-block: 20px; border-top: 1px solid var(--line); }
#next-steps h2, #state h2 { font-size: 26px; margin-bottom: 20px; }
#next-steps li, #state p { font-size: 16px; line-height: 1.7; }
#next-steps a { display: inline-flex; margin-top: 20px; text-decoration: underline; }
.checkout-recovery, .checkout-close { position: fixed; z-index: 2147483647; top: 16px; right: 16px; max-width: calc(100% - 32px); padding: 14px 18px; color: #eee; background: #111; border: 1px solid #aaa; font: 12px/1.5 Mono, monospace; }
.service-panel #checkout { width: 100%; margin-top: 24px; }
.offer.is-recommended { border-top-color: var(--ink); }
@media(max-width:1200px) { .service-panel .row { flex-direction: column; } }
@media(max-width:600px) {
  .computer-row { align-items: flex-start; flex-direction: column; }
  .service-panel .computers-panel > summary { grid-template-columns: auto 1fr; gap: 4px 10px; }
  .service-panel .computers-panel #computer-count { grid-column: 2; }
}