/* support page — the original's dashboard support page (/dashboard/support) inside our dashboard (see DESIGN_PARITY.md).
   The heading, card, form fields, buttons, notices and type come from the shell (.page-head, .card, .form-field, .field,
   .btn, .notice, .t-*); this file only has the page layout and .com's help tip. Tokens only. */
.sup{container-type:inline-size;max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:2rem}

/* header: the shell's .page-head; the help tip sits next to the title */
.sup .page-head{margin-bottom:0}
.sup-title{position:relative;display:flex;align-items:center;gap:8px;min-width:0}

/* help tip (details/summary, as on .com) */
.sup-tip{position:relative;display:inline-flex;flex:0 0 auto}
.sup-tip summary{display:grid;width:1.5rem;height:1.5rem;place-items:center;cursor:pointer;list-style:none;border:1px solid var(--border);border-radius:999px;color:var(--text-muted);background:var(--surface);box-shadow:0 1px 2px color-mix(in oklab,black 6%,transparent);transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.sup-tip summary::-webkit-details-marker{display:none}
.sup-tip summary:hover{color:var(--text);border-color:var(--border-strong);transform:translateY(-1px)}
.sup-tip summary svg{width:.875rem;height:.875rem;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round}
.sup-tip summary .dot{fill:currentColor;stroke:none}
.sup-tip[open] summary{color:var(--accent);border-color:color-mix(in oklab,var(--accent) 38%,var(--border));background:var(--accent-soft)}
.sup-tip-pop{position:absolute;z-index:20;top:calc(100% + .6rem);left:50%;width:max-content;max-width:min(24rem,calc(100vw - 3rem));padding:.85rem 1rem;border:1px solid color-mix(in oklab,var(--accent) 16%,var(--border));border-radius:.875rem;background:var(--surface);color:var(--text-muted);box-shadow:var(--shadow-overlay);font-size:.8125rem;line-height:1.55;transform-origin:top left;animation:sup-tip-in .18s var(--ease-out) both}
@keyframes sup-tip-in{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}

/* form (gap-5 column, as on .com) */
.sup-form{display:flex;flex-direction:column;gap:1.25rem}
.sup-sub{margin:.25rem 0 0}
.sup-from{margin:0}
.sup-form .field{box-shadow:var(--shadow-inset)}
.sup-form .field:focus{box-shadow:0 0 0 3px var(--accent-soft),var(--shadow-inset)}
.sup-count.near{color:var(--warning)}
.sup-form .notice{color:var(--text)}

/* sent */
.sup-ok p{margin:0}
.sup-ok p+p{margin-top:.25rem}
.sup-again{margin-top:1rem}

.sup-alt{margin:-1rem 0 0;color:var(--text-faint);font-size:.8125rem}
.sup-alt a{color:var(--text-muted);text-underline-offset:.2em}
.sup-alt a:hover{color:var(--accent-text)}

@container (max-width:520px){
  .sup-tip{position:static}
  .sup-tip-pop{left:0;max-width:100%}
}