/* Drop 1283: customer care and technical support on the contact form. Built on the site's tokens, light and dark. */
#contact-form,.cs-scope{--cs-line:var(--border-2,#E1E6EE);--cs-soft:var(--bg-2,#F4F6F9);--cs-card:var(--bg-card,#fff);--cs-fg:var(--fg,#0F1B2D);--cs-muted:var(--fg-muted,#5B6B82);
  --cs-accent:var(--accent,#C98E1F);--cs-accent-text:var(--accent-text,var(--accent,#946510));--cs-ok:#15803D;--cs-warn:#B45309;--cs-bad:#B91C1C;--cs-info:#1D4ED8;--cs-r:14px}
[data-theme="dark"] #contact-form,[data-theme="dark"] .cs-scope{--cs-ok:#86EFAC;--cs-warn:#FCD34D;--cs-bad:#FCA5A5;--cs-info:#93C5FD}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #contact-form,:root:not([data-theme="light"]) .cs-scope{--cs-ok:#86EFAC;--cs-warn:#FCD34D;--cs-bad:#FCA5A5;--cs-info:#93C5FD}}
#contact-form [hidden],.cs-scope [hidden]{display:none!important}
.cs-fs{border:0;margin:0;padding:0;min-width:0;display:grid;gap:1.1rem}

/* what the message is about */
.cs-purpose{border:0;margin:0 0 1.4rem;padding:0;min-width:0}
.cs-purpose>legend{padding:0;margin-bottom:.55rem}
.cs-purpose-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));gap:.7rem}
.cs-pcard{position:relative;display:flex;gap:.85rem;align-items:flex-start;padding:1rem 1.05rem;border:1.5px solid var(--cs-line);border-radius:var(--cs-r);background:var(--cs-card);cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s}
.cs-pcard:hover{border-color:color-mix(in srgb,var(--cs-accent) 55%,var(--cs-line))}
.cs-pcard input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.cs-pcard:has(input:checked){border-color:var(--cs-accent);background:color-mix(in srgb,var(--cs-accent) 7%,var(--cs-card));box-shadow:0 0 0 3px color-mix(in srgb,var(--cs-accent) 16%,transparent)}
.cs-pcard:has(input:focus-visible){outline:2px solid var(--cs-accent);outline-offset:2px}
.cs-pcard-ic{flex:0 0 auto;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--cs-soft);color:var(--cs-accent-text)}
.cs-pcard:has(input:checked) .cs-pcard-ic{background:var(--cs-accent);color:#1A1204}
.cs-pcard-ic svg,.cs-area svg,.cs-tips h4 svg,.cs-ai-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cs-pcard-t{display:grid;gap:.25rem;min-width:0}
.cs-pcard-t b{font-size:.95rem;line-height:1.35;color:var(--cs-fg)}
.cs-pcard-t small{font-size:.78rem;line-height:1.55;color:var(--cs-muted)}

/* the support panel */
.cs-panel{margin:0 0 1.5rem;padding:1.25rem;border:1px solid var(--cs-line);border-radius:calc(var(--cs-r) + 4px);background:linear-gradient(180deg,color-mix(in srgb,var(--cs-accent) 5%,var(--cs-card)),var(--cs-card) 9rem)}
.cs-head{display:grid;gap:.3rem}
.cs-kick{font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--cs-accent-text)}
.cs-head h3{margin:0;font-size:1.12rem;letter-spacing:-.01em;text-wrap:balance}
.cs-head p{margin:0;font-size:.84rem;line-height:1.65;color:var(--cs-muted);max-width:68ch}

.cs-ai{display:grid;gap:.4rem;padding:.85rem .95rem;border:1px dashed color-mix(in srgb,var(--cs-accent) 45%,var(--cs-line));border-radius:var(--cs-r);background:var(--cs-card)}
.cs-ai .field-label{margin:0}
.cs-ai-row{display:flex;gap:.5rem;flex-wrap:wrap}
.cs-ai-row .field-input{flex:1 1 14rem;min-width:0}
.cs-ai-btn{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
.cs-ai-btn[aria-busy="true"]{opacity:.65;cursor:progress}
.cs-ai-out{margin:0;font-size:.8rem;line-height:1.55;color:var(--cs-muted)}
.cs-ai-out.is-ok{color:var(--cs-ok)}.cs-ai-out.is-warn{color:var(--cs-warn)}

.cs-areas,.cs-impact{border:0;margin:0;padding:0;min-width:0}
.cs-areas>legend,.cs-impact>legend{padding:0;margin-bottom:.5rem}
.cs-area-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(9.5rem,100%),1fr));gap:.5rem}
.cs-area{position:relative;cursor:pointer;min-width:0}
.cs-area input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.cs-area-in{display:flex;align-items:center;gap:.55rem;height:100%;box-sizing:border-box;padding:.65rem .7rem;border:1.5px solid var(--cs-line);border-radius:12px;background:var(--cs-card);font-size:.8rem;font-weight:650;line-height:1.3;color:var(--cs-fg);transition:border-color .15s,background .15s}
.cs-area-in svg{flex:0 0 auto;color:var(--cs-muted)}
.cs-area:hover .cs-area-in{border-color:color-mix(in srgb,var(--cs-accent) 55%,var(--cs-line))}
.cs-area input:checked+.cs-area-in{border-color:var(--cs-accent);background:color-mix(in srgb,var(--cs-accent) 9%,var(--cs-card))}
.cs-area input:checked+.cs-area-in svg{color:var(--cs-accent-text)}
.cs-area input:focus-visible+.cs-area-in,.cs-imp input:focus-visible+.cs-imp-in{outline:2px solid var(--cs-accent);outline-offset:2px}

.cs-tips{padding:.85rem 1rem;border-radius:var(--cs-r);background:color-mix(in srgb,var(--cs-info) 8%,var(--cs-card));border:1px solid color-mix(in srgb,var(--cs-info) 25%,transparent)}
.cs-tips h4{font-family:inherit;letter-spacing:0;display:flex;align-items:center;gap:.45rem;margin:0 0 .4rem;font-size:.8rem;font-weight:800;color:var(--cs-info)}
.cs-tips ul{margin:0;padding-inline-start:1.15rem;display:grid;gap:.3rem;font-size:.82rem;line-height:1.6;color:var(--cs-fg)}

.cs-impact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(8.25rem,100%),1fr));gap:.5rem}
.cs-imp{position:relative;cursor:pointer;min-width:0}
.cs-imp input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.cs-imp-in{display:grid;gap:.2rem;height:100%;box-sizing:border-box;padding:.65rem .75rem;border:1.5px solid var(--cs-line);border-radius:12px;background:var(--cs-card);border-inline-start-width:4px}
.cs-imp-in b{font-size:.8rem;line-height:1.35;color:var(--cs-fg)}
.cs-imp-in small{font-size:.72rem;color:var(--cs-muted);font-variant-numeric:tabular-nums}
.cs-imp.is-blocked .cs-imp-in{border-inline-start-color:var(--cs-bad)}
.cs-imp.is-degraded .cs-imp-in{border-inline-start-color:var(--cs-warn)}
.cs-imp.is-question .cs-imp-in{border-inline-start-color:var(--cs-info)}
.cs-imp.is-request .cs-imp-in{border-inline-start-color:var(--cs-muted)}
.cs-imp input:checked+.cs-imp-in{border-color:var(--cs-accent);background:color-mix(in srgb,var(--cs-accent) 9%,var(--cs-card))}
.cs-imp.is-blocked input:checked+.cs-imp-in{border-inline-start-color:var(--cs-bad)}

.cs-env{display:flex;gap:.55rem;align-items:flex-start;font-size:.78rem;line-height:1.55;color:var(--cs-muted);cursor:pointer}
.cs-env input{margin-top:.2rem;accent-color:var(--cs-accent)}
.cs-env bdi{color:var(--cs-fg);font-weight:600}
.cs-panel .form-row,.cs-panel .field-group{margin:0}

/* the reply-time promise, by impact */
#sla-promise.cs-sla-blocked{color:var(--cs-bad);border-color:var(--cs-bad)}
#sla-promise.cs-sla-degraded{color:var(--cs-warn);border-color:var(--cs-warn)}
#sla-promise.cs-sla-question,#sla-promise.cs-sla-request{color:var(--cs-accent-text);border-color:var(--cs-accent)}

/* the side card, support mode */
.cs-side{display:grid;gap:.9rem;padding:1.1rem 1.15rem;border:1px solid var(--border-2,#E1E6EE);border-radius:16px;background:var(--bg-card,#fff)}
.cs-side h3{margin:0;font-size:.95rem;display:flex;align-items:center;gap:.5rem}
.cs-side h3 svg{width:18px;height:18px;fill:none;stroke:var(--accent,#C98E1F);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cs-side ol{margin:0;padding-inline-start:1.15rem;display:grid;gap:.35rem;font-size:.82rem;line-height:1.6;color:var(--fg-muted,#5B6B82)}
.cs-side dl{margin:0;display:grid;gap:.35rem}
.cs-side dl>div{display:flex;justify-content:space-between;gap:1rem;font-size:.8rem;padding-block:.35rem;border-bottom:1px solid var(--border-2,#E1E6EE)}
.cs-side dl>div:last-child{border-bottom:0}
.cs-side dt{color:var(--fg,#0F1B2D)}.cs-side dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums;color:var(--accent-text,var(--accent,#946510));white-space:nowrap}
.cs-side-links{display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-size:.8rem}
.cs-side-links a{font-weight:700;color:var(--accent-text,var(--accent,#946510));text-decoration:none}
.cs-side-links a:hover{text-decoration:underline}
.cs-side .cs-kick{margin-bottom:-.5rem}

@media (max-width:560px){.cs-panel{padding:1rem}.cs-area-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cs-signed{margin:0;padding:.65rem .85rem;border-radius:12px;font-size:.82rem;line-height:1.6;background:color-mix(in srgb,var(--cs-info) 9%,var(--cs-card));color:var(--cs-fg)}.cs-signed a{font-weight:700;color:var(--cs-info)}
/* drop 1286: answers while they write */
.cs-ans{display:grid;gap:.5rem;margin:.6rem 0 0;padding:.85rem 1rem;border:1px solid color-mix(in srgb,var(--cs-ok) 35%,var(--cs-line));border-radius:var(--cs-r);background:color-mix(in srgb,var(--cs-ok) 6%,var(--cs-card))}
.cs-ans header{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.cs-ans header b{font-size:.86rem;color:var(--cs-fg)}
.cs-ans-x{border:0;background:none;font-size:1.2rem;line-height:1;cursor:pointer;color:var(--cs-muted);padding:.1rem .35rem;border-radius:6px}
.cs-ans-x:focus-visible,.cs-ans-yes:focus-visible,.cs-ans a:focus-visible{outline:2px solid var(--cs-accent);outline-offset:2px}
.cs-ans-p{margin:0;font-size:.74rem;color:var(--cs-muted)}
.cs-ans ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.cs-ans li{display:grid;gap:.15rem;min-width:0}
.cs-ans a{font-weight:700;font-size:.86rem;color:var(--cs-accent-text);text-decoration:none}.cs-ans a:hover{text-decoration:underline}
.cs-ans li span{font-size:.78rem;line-height:1.55;color:var(--cs-muted)}
.cs-ans-yes{justify-self:start;padding:.45rem .8rem;border:1px solid var(--cs-ok);border-radius:10px;background:transparent;color:var(--cs-ok);font:inherit;font-size:.8rem;font-weight:700;cursor:pointer}
.cs-ans-done{margin:0;font-size:.84rem;font-weight:600;color:var(--cs-ok)}