/* TsBot — the configurator à la carte as a component (rd-pricing.js, window.TsBotConfigurator.mount). One look for
   /pricing and for the panel's «+ New service» (owner, 07-10-2026). Everything is scoped under the root class .tsc and
   the component's own classes carry the tsc- prefix, so it can live on any page that has ds.css (which gives it .card,
   .card-live, .btn, .opt/.opts, .fine, .tag, .slots-*). The layout follows the width the HOST gives it (container
   queries on the root), not the viewport. Moving border: the summary card only. */
.tsc { container-type: inline-size; container-name: tsc; min-width: 0; }
.tsc .tsc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: clamp(24px, 3.4vw, 48px); align-items: start; }
.tsc .tsc-flow { display: flex; flex-direction: column; gap: clamp(28px, 3.4vw, 40px); min-width: 0; }
.tsc .tsc-groups { display: flex; flex-direction: column; gap: clamp(28px, 3.4vw, 40px); }
.tsc .tsc-step { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tsc .tsc-step h2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin: 0; font-size: clamp(1.25rem, 2vw, 1.55rem); letter-spacing: -.02em; }
.tsc .tsc-step h2 small { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; color: var(--acc); padding: 4px 8px; border: 1px solid var(--acc-line); border-radius: 999px; }

/* slots */
.tsc .slots-box { padding: clamp(18px, 2.4vw, 28px); display: flex; flex-direction: column; gap: 14px; }
.tsc .slots-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tsc .slots-label { display: flex; align-items: baseline; gap: 10px; color: var(--mut); }
.tsc .slots-label b { font-size: clamp(2.6rem, 5vw, 3.8rem); font-weight: 500; letter-spacing: -.05em; line-height: 1; color: var(--strong); font-variant-numeric: tabular-nums; margin-right: 0; }
.tsc .big-price { font-family: var(--mono); font-size: clamp(1.1rem, 2vw, 1.4rem); color: var(--acc-text); white-space: nowrap; }

/* the summary: sticky, with the moving border */
.tsc .tsc-sum { position: sticky; top: calc(var(--nav-h, 0px) + 20px); padding: clamp(20px, 2.4vw, 28px); display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tsc .tsc-sum .tag { color: var(--friend); }
.tsc .tsc-lines { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.tsc .tsc-lines li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; color: var(--mut); }
.tsc .tsc-lines li span:first-child { min-width: 0; overflow-wrap: break-word; }
.tsc .tsc-lines li span:last-child { font-family: var(--mono); font-size: 12.5px; color: var(--fg); white-space: nowrap; padding-top: 2px; }
.tsc .tsc-lines li.tsc-line-disc { grid-template-columns: minmax(0, 1fr); color: var(--acc-text); }
.tsc .tsc-lines li.tsc-line-disc span { font-family: inherit; font-size: 14px; white-space: normal; color: var(--acc-text); padding-top: 0; }
.tsc .tsc-lines li.tsc-line-war span:first-child { color: var(--fg); }
.tsc .tsc-sum hr { border: 0; height: 1px; background: var(--line); margin: 0; }
.tsc .tsc-total { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.tsc .tsc-total b { font-family: var(--sans); font-size: clamp(2.4rem, 4.2vw, 3.3rem); font-weight: 500; letter-spacing: -.05em; line-height: 1; color: var(--strong); text-transform: none; }
.tsc .tsc-acct { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.tsc .tsc-acct-h { display: grid; grid-template-columns: 7px minmax(0, 1fr); align-items: center; column-gap: 9px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.tsc .tsc-acct-t { margin: 0; font-size: 14px; color: var(--fg); }
.tsc .tsc-acct-cta { display: flex; flex-direction: column; gap: 10px; }
.tsc .tsc-acct-cta .btn { width: 100%; white-space: normal; text-align: center; line-height: 1.2; }
.tsc .tsc-acct-cta .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* 1 · three products that are ticked */
.tsc .tsc-prods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tsc .tsc-prod { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding: 18px 18px 16px;
  border: 1px solid var(--line-2); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--glass-2), var(--glass));
  color: var(--fg); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s; }
.tsc .tsc-prod:hover, .tsc .tsc-prod:focus-visible { border-color: var(--acc-line); outline: none; }
.tsc .tsc-prod.on { border-color: var(--acc); background: radial-gradient(circle at 100% 0%, rgba(255, 90, 51, .14), transparent 60%), linear-gradient(180deg, var(--glass-2), var(--glass)); box-shadow: 0 30px 70px -40px rgba(255, 90, 51, .55); }
.tsc .tsc-prod.is-off { opacity: .55; cursor: not-allowed; border-style: dashed; }
.tsc .tsc-prod b { font-size: 1.12rem; font-weight: 600; color: var(--strong); }
.tsc .tsc-prod-d { font-size: 13.5px; line-height: 1.45; color: var(--mut); }
.tsc .tsc-prod-p { margin-top: auto; padding-top: 4px; font-size: 13px; color: var(--acc-text); }
.tsc .tsc-prod-off { font-size: 12.5px; line-height: 1.4; color: #ffc45c; overflow-wrap: break-word; }
.tsc .tsc-prod-check { position: absolute; top: 14px; right: 14px; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line-2); transition: all .2s; }
.tsc .tsc-prod.on .tsc-prod-check { border-color: var(--acc); background: var(--acc); }
.tsc .tsc-prod.on .tsc-prod-check::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid var(--acc-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.tsc .tsc-prod-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line-2); color: var(--cyan); background: rgba(34, 188, 214, .07); }
.tsc .tsc-prod-ic.bot { color: var(--friend); }
.tsc .tsc-prod-ic.war { color: var(--acc); background: rgba(255, 90, 51, .07); }
.tsc .tsc-prod-ic svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tsc .tsc-note { margin: 0; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(255, 196, 92, .45); background: rgba(255, 196, 92, .06); color: #ffd99a; font-size: 14px; }

/* 2 · the options of what was chosen */
.tsc .tsc-block { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
.tsc .tsc-block + .tsc-block { padding-top: 22px; border-top: 1px dashed var(--line-2); }
.tsc .tsc-block-h { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--strong); }
.tsc .tsc-sub { display: flex; flex-direction: column; gap: 10px; }
.tsc .tsc-sub h4 { margin: 0; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.tsc .tsc-field { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--mut); max-width: 420px; }
.tsc .tsc-field select, .tsc .tsc-field input, .tsc .tsc-g input { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(7, 11, 16, .7); color: var(--fg); font: inherit; }
.tsc .tsc-field select:focus, .tsc .tsc-field input:focus, .tsc .tsc-g input:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px rgba(255, 90, 51, .16); }
.tsc .tsc-field select:disabled { opacity: .7; cursor: not-allowed; }
.tsc .tsc-hint { font-size: 12.5px; line-height: 1.4; color: var(--dim); }
.tsc .tsc-wplans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tsc .tsc-wplan { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px; border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--glass-2), var(--glass)); color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.tsc .tsc-wplan:hover, .tsc .tsc-wplan:focus-visible { border-color: var(--acc-line); outline: none; }
.tsc .tsc-wplan.on { border-color: var(--acc); background: radial-gradient(circle at 100% 0%, rgba(255, 90, 51, .14), transparent 60%), linear-gradient(180deg, var(--glass-2), var(--glass)); box-shadow: 0 30px 70px -40px rgba(255, 90, 51, .55); }
.tsc .tsc-wplan-n { font-weight: 600; color: var(--strong); }
.tsc .tsc-wplan-p { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.tsc .tsc-wplan-p b { font-size: 1.9rem; font-weight: 500; letter-spacing: -.04em; line-height: 1; color: var(--strong); font-family: var(--sans); }
.tsc .tsc-wplan-p span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.tsc .tsc-wplan ul { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-soft); }
.tsc .tsc-wplan li { padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; color: var(--mut); overflow-wrap: break-word; }
.tsc .tsc-full { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(255, 196, 92, .45); background: rgba(255, 196, 92, .06); }
.tsc .tsc-full p { margin: 0; color: #ffd99a; font-size: 14px; overflow-wrap: break-word; }
.tsc .tsc-guilds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tsc .tsc-gcol { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tsc .tsc-gh { font-size: 14px; color: var(--mut); }
.tsc .tsc-g { display: flex; flex-direction: column; gap: 4px; }
.tsc .tsc-gs { min-height: 1.2em; font-size: 12.5px; color: var(--dim); overflow-wrap: anywhere; }
.tsc .tsc-gs.is-ok { color: #53e08f; }
.tsc .tsc-gs.is-bad { color: #ffb3a6; }
.tsc .tsc-gerr { color: #ffb3a6; }
.tsc [hidden] { display: none !important; }

/* the width the host gives (the root is the container). On /pricing these are the page's old viewport breakpoints
   (1080 / 760 / 700 px) expressed as the width of its column */
@container tsc (max-width: 984px) {
  .tsc .tsc-grid { grid-template-columns: minmax(0, 1fr); }
  .tsc .tsc-sum { position: relative; top: auto; }
  .tsc .tsc-wplans { grid-template-columns: minmax(0, 1fr); }
}
@container tsc (max-width: 689px) {
  .tsc .tsc-prods { grid-template-columns: minmax(0, 1fr); }
  .tsc .tsc-guilds { grid-template-columns: minmax(0, 1fr); }
  .tsc .tsc-field { max-width: none; }
}
@container tsc (max-width: 636px) {
  .tsc .opts, .tsc .opts.two { grid-template-columns: minmax(0, 1fr); }
  .tsc .opt.row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .tsc .opt.row .price { grid-column: 1; grid-row: 2; }
  .tsc .opt.row .check { grid-column: 2; grid-row: 1 / span 2; }
}