/* StringKart shared design tokens + components.
   Load this BEFORE the page's own <style> so page-local rules win on conflict.
   All class names are prefixed .sk- to avoid colliding with page-local CSS. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@800;900&display=swap');
:root {
  --brand: #087E8B;
  --brand-dark: #055E68;
  --accent: #FFB703;
  --ink: #102A33;
  --muted: #64787f;
  --line: #e2ebed;
  --line-strong: #d3e0e3;
  --bg: #f1f6f7;
  --tap: 46px;
  --warn: #b3791a;
  --danger: #c0392b;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 12px 40px rgba(16, 42, 51, 0.14);
}

/* ---------- Brand wordmark (Nunito rounded-bold, matching the emblem lockup:
   teal "String" + amber "Kart", with gradient initial "S"/"K" echoing SK_icon.
   The initial letters must be wrapped in a <span class="cap"> for the gradient.
   On dark surfaces add .sk-wordmark-on-dark: "String" reads solid white (the
   "S" drops its gradient so the word is one flat colour), and "Kart" carries
   the warm gradient across ALL FOUR letters rather than only the "K". ---------- */
.sk-wordmark { font-family:'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight:900; letter-spacing:-0.4px; white-space:nowrap; }
.sk-wordmark .s1, .sk-wordmark .s2 { display:inline-block; margin:0; padding:0; }
.sk-wordmark .s2 { margin-left:-0.02em; }
.sk-wordmark .s1 { color:#087E8B; }
.sk-wordmark .s2 { color:#FFB703; }
.sk-wordmark-on-dark .s1 { color:#fff; }
.sk-wordmark-on-dark .s2 { color:#FFB703; }
@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  .sk-wordmark .cap { -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
  .sk-wordmark .s1 .cap { background-image:linear-gradient(150deg,#19bcd2 0%,#2f6be6 100%); }
  .sk-wordmark .s2 .cap { background-image:linear-gradient(150deg,#f9a51a 0%,#f0641e 50%,#e5237a 100%); }

  /* On dark: the whole "Kart" shares ONE gradient, so "art" matches the "K"
     instead of sitting flat amber beside it. The gradient is painted on the
     .s2 span and the inner .cap resets to inherit, letting the parent's
     background show through all four letters as a single continuous sweep. */
  .sk-wordmark-on-dark .s2 {
    background-image:linear-gradient(150deg,#f9a51a 0%,#f0641e 50%,#e5237a 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
  }
  .sk-wordmark-on-dark .s2 .cap { background-image:none; }
  /* "String" is solid white on dark — kill the blue gradient on the "S". */
  .sk-wordmark-on-dark .s1 .cap {
    background-image:none; -webkit-text-fill-color:#fff; color:#fff;
  }
}
/* Party suffix after the wordmark (Admin/Agent/Support/Vendor) — plain bold, matches Admin. */
.sfx { margin-left:6px; font-weight:800; letter-spacing:-0.2px; white-space:nowrap; }

/* ---------- Toast (self-created by SK.toast on pages without one) ---------- */
.sk-toast { position:fixed; left:50%; bottom:20px; transform:translateX(-50%); background:#102A33; color:#fff; padding:12px 42px 12px 16px; border-radius:10px; font-size:14px; line-height:1.35; max-width:92%; box-shadow:0 6px 20px rgba(0,0,0,.35); opacity:0; transition:opacity .2s; pointer-events:none; z-index:60; }
.sk-toast.show { opacity:.98; pointer-events:auto; }
.sk-toast.sk-toast-err { background:#7c1d1d; }
.sk-toast .sk-toast-x { position:absolute; top:6px; right:8px; width:24px; height:24px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.12); border:0; border-radius:6px; color:#fff; font-size:16px; line-height:1; cursor:pointer; opacity:.85; }
.sk-toast .sk-toast-x:hover { opacity:1; background:rgba(255,255,255,.22); }

/* ---------- Confirm modal (SK.confirm) ---------- */
.sk-modal-bg { position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; z-index:70; padding:16px; }
.sk-modal { background:#fff; border-radius:16px; padding:20px; max-width:360px; width:100%; box-shadow:0 20px 50px rgba(0,0,0,.3); font-family:inherit; }
.sk-modal h3 { margin:0 0 6px; font-size:17px; color:var(--ink); }
.sk-modal p { margin:0 0 14px; font-size:14px; color:var(--muted); line-height:1.45; white-space:pre-line; }
.sk-modal .sk-modal-actions { display:flex; gap:8px; }
.sk-modal .sk-modal-actions button { flex:1; min-height:var(--tap); border:0; border-radius:11px; font:inherit; font-weight:700; font-size:15px; cursor:pointer; }
.sk-modal .sk-ok { background:var(--brand); color:#fff; }
.sk-modal .sk-ok:hover { background:var(--brand-dark); }
.sk-modal .sk-ok.sk-danger { background:var(--danger); }
.sk-modal .sk-cancel { background:#eaf3f4; color:var(--brand-dark); }

/* ---------- Full-size image viewer (SK.lightbox) ----------
Sits above .sk-modal-bg (z-index 70) so a picture opened from inside a dialog
is not trapped behind it. The backdrop is zoom-out; the picture itself is not,
so a click that lands on the image doesn't dismiss what you came to look at. */
.sk-lightbox { position:fixed; inset:0; background:rgba(0,0,0,.82); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; z-index:80; padding:24px 16px; cursor:zoom-out; }
.sk-lightbox img { max-width:min(92vw,720px); max-height:78vh; width:auto; height:auto; object-fit:contain; border-radius:14px; background:#fff; box-shadow:0 24px 60px rgba(0,0,0,.5); cursor:default; }
.sk-lightbox-cap { color:#fff; font-size:13.5px; font-weight:600; text-align:center; max-width:min(92vw,720px); }
.sk-lightbox-x { position:absolute; top:14px; right:14px; width:40px; height:40px; border:0; border-radius:50%; background:rgba(255,255,255,.16); color:#fff; font-size:17px; line-height:1; cursor:pointer; }
.sk-lightbox-x:hover { background:rgba(255,255,255,.28); }

/* ---------- Custom checkbox (.sk-check) ----------
   Use on any <input type="checkbox"> instead of hand-rolling styles. Pages
   commonly reset `input { appearance:none; width:100%; min-height:var(--tap);
   padding:...; }` for text fields, which silently breaks native checkboxes
   (no tick, stretched full-width) — this bit index.html's damage-ack box and
   vendor.html's string-stock boxes. .sk-check (class specificity) beats those
   element-level resets and renders a 22x22 box with a ✓ on :checked. */
.sk-check { -webkit-appearance:none; appearance:none; flex:none; width:22px; height:22px; min-height:0; margin:0; padding:0; border:2px solid var(--line-strong); border-radius:6px; background:#fff; cursor:pointer; position:relative; transition:border-color .15s, background .15s; }
.sk-check:hover { border-color:#b5dde3; }
/* Doubled class (.sk-check.sk-check) lifts specificity to 0,2,1 so page-level
   `input:focus { background:#fff; border-color:... }` rules (0,1,1, loaded
   AFTER this file) can never wash out the checked state while focused. */
.sk-check.sk-check:checked { border-color:var(--brand); background:var(--brand); }
.sk-check:checked::after { content:"\2713"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; font-weight:900; line-height:1; }
.sk-check:focus-visible { box-shadow:0 0 0 3px rgba(8,126,139,.18); }
.sk-check:disabled { opacity:.5; cursor:not-allowed; }

/* ---------- Skeleton shimmer ---------- */
.sk-skeleton { display:block; border-radius:8px; background:linear-gradient(90deg, #ebf2f3 25%, #f7fafb 50%, #ebf2f3 75%); background-size:200% 100%; animation:sk-shimmer 1.2s infinite linear; min-height:14px; }
@keyframes sk-shimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }

/* ---------- Inline error/retry banner (SK-rendered) ---------- */
.sk-load-err { background:#fdecec; border:1px solid #f3bdbd; border-radius:12px; padding:12px 14px; color:var(--danger); font-size:14px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:8px 0; }
.sk-load-err button { background:var(--danger); color:#fff; border:0; border-radius:9px; padding:8px 14px; font:inherit; font-weight:700; font-size:13px; cursor:pointer; min-height:36px; }

/* ---------- Change-request before/after diff table ---------- */
.sk-diff { width:100%; border-collapse:collapse; font-size:12.5px; margin:8px 0 2px; }
.sk-diff th, .sk-diff td { text-align:left; padding:5px 8px; border-bottom:1px solid #e2ebed; vertical-align:top; }
.sk-diff thead th { color:#64787f; font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:.3px; }
.sk-diff td:first-child { color:#64787f; white-space:nowrap; }
.sk-diff td b { color:#055E68; }

/* ---------- Status badge palette (13-state workflow + simple statuses) ---------- */
.sk-st { display:inline-block; border-radius:999px; padding:3px 10px; font-size:12px; font-weight:700; border:1px solid transparent; }
.sk-st-queue  { background:#eef2ff; color:#3b46c4; border-color:#d8dfff; }  /* awaiting Pilot/system */
.sk-st-move   { background:#e7f4ff; color:#0b6aa8; border-color:#c9e6fb; }  /* in motion */
.sk-st-work   { background:#fff6e6; color:var(--warn); border-color:#f3e2bd; } /* workshop */
.sk-st-done   { background:#e6f4f6; color:var(--brand-dark); border-color:#c9e4e8; } /* completed */
.sk-st-cancel { background:#fdecec; color:var(--danger); border-color:#f5c6c6; }

/* ---------- Connection pill (agent SSE status) ---------- */
.sk-conn { display:none; align-items:center; gap:6px; font-size:11px; font-weight:700; border-radius:999px; padding:4px 10px; background:rgba(255,255,255,.16); color:#fff; }
.sk-conn.show { display:inline-flex; }
.sk-conn::before { content:""; width:7px; height:7px; border-radius:50%; background:#ffb54d; animation:sk-blink 1.1s infinite alternate; }
@keyframes sk-blink { from { opacity:.4; } to { opacity:1; } }

/* ---------- Promotions ---------- */
.sk-promo-banner { position:relative; overflow:hidden; background:linear-gradient(135deg, #08181D 0%, #0A3F47 55%, #087E8B 130%); border:1px solid rgba(255,183,3,.55); border-radius:var(--radius); padding:16px 44px 16px 18px; margin:14px 0 4px; color:#fff; box-shadow:var(--shadow); }
.sk-promo-banner::after { content:""; position:absolute; top:-30px; right:-30px; width:110px; height:110px; border-radius:50%; background:radial-gradient(circle, rgba(255,183,3,.28), transparent 70%); pointer-events:none; }
.sk-promo-title { font-weight:800; font-size:16.5px; letter-spacing:.01em; display:flex; align-items:center; gap:8px; }
.sk-promo-title .sk-promo-spark { font-size:18px; }
.sk-promo-text { margin-top:4px; font-size:13.5px; color:rgba(255,255,255,.85); line-height:1.45; }
.sk-promo-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; }
.sk-promo-apply { background:var(--accent); color:#08181D; border:0; border-radius:999px; padding:9px 16px; font:inherit; font-weight:800; font-size:13px; cursor:pointer; min-height:36px; }
.sk-promo-apply:hover { filter:brightness(1.06); }
.sk-promo-apply:disabled { opacity:.6; cursor:default; }
.sk-promo-until { font-size:11.5px; font-weight:700; color:var(--accent); background:rgba(255,183,3,.14); border:1px solid rgba(255,183,3,.45); border-radius:999px; padding:5px 10px; }
.sk-promo-x { position:absolute; top:8px; right:8px; width:28px; height:28px; background:rgba(255,255,255,.12); border:0; border-radius:8px; color:#fff; font-size:16px; line-height:1; cursor:pointer; opacity:.8; }
.sk-promo-x:hover { opacity:1; background:rgba(255,255,255,.24); }

/* Standing membership CTA — always visible (not tied to promo dismiss/expiry). */
.sk-member-cta { display:block; text-align:center; background:linear-gradient(135deg, #08181D 0%, #0A3F47 55%, #087E8B 130%); color:#fff; text-decoration:none; font-weight:700; font-size:13.5px; border:1px solid rgba(255,183,3,.55); border-radius:var(--radius); padding:12px 16px; margin:10px 0 4px; box-shadow:var(--shadow); }
.sk-member-cta:hover { filter:brightness(1.06); }

.sk-offers { margin:12px 0 4px; }
.sk-offers-head { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:0 0 8px; }
.sk-offers-title { font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin:0; }
.sk-chips { display:flex; gap:8px; flex-wrap:wrap; }
.sk-chip { display:inline-flex; align-items:center; gap:7px; background:#fff; border:1.5px dashed var(--brand); border-radius:999px; padding:8px 14px; font:inherit; font-size:13px; font-weight:700; color:var(--brand-dark); cursor:pointer; min-height:38px; transition:all .15s; }
.sk-chip:hover { background:#eef8f9; border-style:solid; }
.sk-chip .sk-chip-off { background:var(--accent); color:#08181D; border-radius:999px; padding:2px 8px; font-size:11px; font-weight:800; }
.sk-chip.applied { background:var(--brand); border:1.5px solid var(--brand); color:#fff; }
.sk-chip.applied .sk-chip-off { background:rgba(255,255,255,.9); }

.sk-plan-flag { position:absolute; top:-9px; right:10px; background:var(--accent); color:#08181D; font-size:10.5px; font-weight:800; letter-spacing:.03em; border-radius:999px; padding:3px 10px; box-shadow:0 2px 8px rgba(16,42,51,.18); }
.sk-plan-hl { border-color:var(--brand) !important; box-shadow:0 0 0 3px rgba(8,126,139,.14); position:relative; }

.sk-savings { display:flex; align-items:center; gap:6px; color:var(--accent); font-weight:800; font-size:13.5px; margin-top:6px; }

/* ---------- Small shared utilities ---------- */
.sk-refresh { background:#eaf3f4; color:var(--brand-dark); border:0; border-radius:9px; padding:9px 16px; font:inherit; font-weight:700; font-size:13px; cursor:pointer; min-height:38px; }
.sk-refresh:hover { background:#dcebee; }
.sk-hint-list { margin:6px 0 0; padding-left:18px; font-size:12.5px; color:var(--danger); }
.sk-hint-list li { margin:2px 0; }