/* ============================================================================
   SearchScore UI — framework-free component system (light-DOM web components)
   Reuses main.css design tokens (--cta, --geo/--seo/--cro, --s-*, --elev-*,
   --ease-*). Light DOM: styles apply on server-rendered HTML before JS upgrades
   (no FOUC), and native inputs participate in forms normally.
   Load AFTER main.css.
   ========================================================================== */

/* Local component tokens (fall back if main.css absent, so the lib is portable) */
:root {
  --ss-radius: 12px;
  --ss-radius-sm: 8px;
  --ss-focus: var(--cta, #2F80FF);
  --ss-focus-ring: 0 0 0 3px color-mix(in srgb, var(--ss-focus) 35%, transparent);
  --ss-danger: var(--red, #ef4444);
  --ss-ok: var(--seo, #16a34a);
  --ss-dur: 160ms;
}

/* Custom elements are inline by default — give them sensible box models */
ss-button { display: inline-flex; }
ss-button[full] { display: flex; }
ss-field, ss-empty, ss-skeleton, ss-score-ring { display: block; }
ss-spinner { display: inline-flex; }

/* Screen-reader-only utility */
.ss-sr { position:absolute!important; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; }

/* Shared focus treatment — visible, keyboard-only */
.ss-btn:focus-visible,
.ss-field :is(input,select,textarea):focus-visible,
.ss-toast__close:focus-visible {
  outline: none;
  box-shadow: var(--ss-focus-ring);
}

/* ---- Button ------------------------------------------------------------- */
.ss-btn {
  --_bg: var(--cta, #2F80FF); --_fg: #fff; --_bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600; line-height: 1; text-decoration: none;
  border: 1px solid var(--_bd); border-radius: var(--ss-radius-sm);
  background: var(--_bg); color: var(--_fg); cursor: pointer;
  padding: 0 18px; height: 44px; white-space: nowrap; position: relative;
  transition: filter var(--ss-dur) var(--ease-out, ease), background var(--ss-dur), box-shadow var(--ss-dur);
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.ss-btn:hover:not(:disabled):not([aria-disabled="true"]) { filter: brightness(1.06); }
.ss-btn:active:not(:disabled) { filter: brightness(0.96); transform: translateY(0.5px); }
.ss-btn--secondary { --_bg: var(--paper-2, #f4f6fa); --_fg: var(--ink, #0f172a); --_bd: var(--line-strong, rgba(6,12,25,.16)); }
.ss-btn--ghost     { --_bg: transparent; --_fg: var(--ink, #0f172a); --_bd: var(--line-strong, rgba(6,12,25,.16)); }
.ss-btn--danger    { --_bg: var(--ss-danger); --_fg: #fff; }
.ss-btn--link      { --_bg: transparent; --_fg: var(--cta, #2F80FF); --_bd: transparent; height: auto; padding: 2px 4px; text-decoration: underline; text-underline-offset: 3px; }
.ss-btn--sm { height: 36px; padding: 0 14px; font-size: 14px; }
.ss-btn--lg { height: 52px; padding: 0 26px; font-size: 17px; }
.ss-btn--full { width: 100%; }
.ss-btn--icon { padding: 0; width: 44px; }
.ss-btn--icon.ss-btn--sm { width: 36px; } .ss-btn--icon.ss-btn--lg { width: 52px; }
.ss-btn:disabled, .ss-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; filter: none; }
/* Loading: keep label width to avoid layout shift; overlay spinner */
.ss-btn[aria-busy="true"] { cursor: progress; }
.ss-btn[aria-busy="true"] .ss-btn__label { visibility: hidden; }
.ss-btn__spin {
  position: absolute; width: 1.1em; height: 1.1em; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: ss-spin .6s linear infinite;
}

/* ---- Spinner ------------------------------------------------------------ */
.ss-spinner__svg { width: 1.25em; height: 1.25em; color: currentColor; }
.ss-spinner[data-size="sm"] .ss-spinner__svg { width: 1em; height: 1em; }
.ss-spinner[data-size="lg"] .ss-spinner__svg { width: 2em; height: 2em; }
.ss-spinner__svg circle { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; opacity: .25; }
.ss-spinner__svg .ss-spinner__arc { opacity: 1; stroke-dasharray: 80; stroke-dashoffset: 60; transform-origin: center; animation: ss-spin .7s linear infinite; }

/* ---- Field (accessible form control) ----------------------------------- */
.ss-field { margin-bottom: var(--s-3, 24px); }
.ss-field__label { display: inline-block; font-weight: 600; font-size: 14px; color: var(--ink, #0f172a); margin-bottom: 6px; }
.ss-field__req { color: var(--ss-danger); margin-left: 2px; }
.ss-field :is(input,select,textarea) {
  width: 100%; font: inherit; color: var(--ink, #0f172a);
  background: var(--paper, #fff); border: 1px solid var(--line-strong, rgba(6,12,25,.16));
  border-radius: var(--ss-radius-sm); padding: 0 14px; height: 46px;
  transition: border-color var(--ss-dur), box-shadow var(--ss-dur);
}
.ss-field textarea { height: auto; padding: 12px 14px; min-height: 96px; resize: vertical; }
.ss-field :is(input,select,textarea)::placeholder { color: var(--muted-2, #6b7488); }
.ss-field__hint { font-size: 13px; color: var(--muted, #4a5366); margin: 6px 0 0; }
.ss-field__error { font-size: 13px; color: var(--ss-danger); margin: 6px 0 0; display: none; }
.ss-field[data-invalid] :is(input,select,textarea) { border-color: var(--ss-danger); }
.ss-field[data-invalid] .ss-field__error { display: block; }
.ss-field[data-invalid] .ss-field__hint { display: none; }

/* ---- Skeleton ----------------------------------------------------------- */
.ss-skeleton, .ss-skeleton__line {
  background: linear-gradient(90deg, var(--paper-2,#f4f6fa) 25%, var(--paper-3,#e8eef9) 37%, var(--paper-2,#f4f6fa) 63%);
  background-size: 400% 100%; border-radius: var(--ss-radius-sm); animation: ss-shimmer 1.4s ease infinite;
}
.ss-skeleton__line { height: .8em; margin-bottom: .55em; }
.ss-skeleton__line:last-child { margin-bottom: 0; width: 70%; }

/* ---- Empty state -------------------------------------------------------- */
.ss-empty { text-align: center; padding: var(--s-5, 48px) var(--s-3, 24px); max-width: 420px; margin: 0 auto; }
.ss-empty__icon { font-size: 32px; line-height: 1; margin-bottom: var(--s-2, 16px); opacity: .8; }
.ss-empty__title { font-weight: 700; font-size: 18px; color: var(--ink, #0f172a); margin: 0 0 6px; }
.ss-empty__body { color: var(--muted, #4a5366); font-size: 14.5px; line-height: 1.5; margin: 0 0 var(--s-3,24px); }

/* ---- Score ring (signature primitive) ----------------------------------
   Themeable via CSS custom properties (no internal-class overrides needed):
     --ss-ring-size, --ss-ring-stroke, --ss-ring-track, --ss-ring-color,
     --ss-ring-num-font/size/weight/color, --ss-ring-dur.
   Geometry is fixed (viewBox 100, r42, circ 264) and matches the existing
   audit cards; visual size is set via --ss-ring-size. Number defaults to the
   brand's Instrument Serif so adoption is parity, not regression.
   Color modes: discipline (geo/seo/cro presets) or score (HSL via JS).        */
.ss-score-ring {
  --ss-ring-size: 100px; --ss-ring-stroke: 8px;
  --ss-ring-track: var(--line, rgba(6,12,25,.08));
  --ss-ring-color: var(--cta, #2f80ff);
  --ss-ring-num-font: 'Instrument Serif', Georgia, serif;
  --ss-ring-num-size: 28px; --ss-ring-num-weight: 400;
  --ss-ring-num-color: var(--ink, #0f172a);
  --ss-ring-dur: 1.2s;
  width: var(--ss-ring-size); text-align: center;
}
.ss-score-ring__wrap { position: relative; width: var(--ss-ring-size); height: var(--ss-ring-size); margin: 0 auto; }
.ss-score-ring__svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.ss-score-ring__track { fill: none; stroke: var(--ss-ring-track); stroke-width: var(--ss-ring-stroke); }
.ss-score-ring__fill  { fill: none; stroke: var(--ss-ring-color); stroke-width: var(--ss-ring-stroke); stroke-linecap: round;
  transition: stroke-dashoffset var(--ss-ring-dur) var(--ease-out, ease), stroke .6s ease; }
.ss-score-ring[data-discipline="geo"] { --ss-ring-color: var(--geo, #22D3EE); }
.ss-score-ring[data-discipline="seo"] { --ss-ring-color: var(--seo, #4ADE80); }
.ss-score-ring[data-discipline="cro"] { --ss-ring-color: var(--cro, #A78BFA); }
.ss-score-ring__num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--ss-ring-num-font); font-size: var(--ss-ring-num-size); font-weight: var(--ss-ring-num-weight); color: var(--ss-ring-num-color); line-height: 1; }
.ss-score-ring__label { font-size: 12px; color: var(--muted, #4a5366); margin-top: 6px; }

/* ---- Toasts ------------------------------------------------------------- */
.ss-toast-region { position: fixed; z-index: 9999; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 10px; max-width: min(380px, calc(100vw - 32px)); }
.ss-toast {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
  background: var(--ink, #0f172a); color: #fff; border-radius: var(--ss-radius);
  box-shadow: var(--elev-2, 0 8px 24px rgba(0,0,0,.18)); font-size: 14px; line-height: 1.4;
  animation: ss-toast-in .22s var(--ease-out, ease) both;
}
.ss-toast[data-variant="success"] { background: #0e7a3a; }
.ss-toast[data-variant="error"]   { background: #b42318; }
.ss-toast[data-variant="warning"] { background: #9a5b00; }
.ss-toast[data-leaving] { animation: ss-toast-out .18s ease forwards; }
.ss-toast__msg { flex: 1; }
.ss-toast__action { background: none; border: 0; color: #fff; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; padding: 0; }
.ss-toast__close { background: none; border: 0; color: inherit; cursor: pointer; opacity: .7; font-size: 18px; line-height: 1; padding: 0 2px; border-radius: 4px; }
.ss-toast__close:hover { opacity: 1; }

/* ---- Keyframes ---------------------------------------------------------- */
@keyframes ss-spin { to { transform: rotate(360deg); } }
@keyframes ss-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@keyframes ss-toast-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes ss-toast-out { to { opacity: 0; transform: translateY(8px); } }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 600px) {
  .ss-toast-region { left: 16px; right: 16px; bottom: 16px; max-width: none; }
  .ss-btn { height: 46px; } /* larger tap target on mobile */
}

/* ---- Reduced motion: kill non-essential animation ----------------------- */
@media (prefers-reduced-motion: reduce) {
  .ss-skeleton, .ss-skeleton__line { animation: none; }
  .ss-score-ring__fill { transition: none; }
  .ss-toast { animation: none; }
  .ss-btn__spin, .ss-spinner__svg .ss-spinner__arc { animation-duration: 1.2s; } /* slow, don't remove — it signals progress */
}