/* ─────────────────────────────────────────────────────────────────────
   SEP — IRCC Processing Time Checker
   Vanilla widget mounted into #sep-processing-time by processing-time.js.
   Namespaced under .pt- inside a .pt-root wrapper so the article-body
   :global() styles can't leak in. Shares the SEP --acc-* theme tokens.
   ───────────────────────────────────────────────────────────────────── */

.pt-root {
  --pt-amber: rgb(var(--acc-amber, 252 188 69));
  --pt-amber-2: rgb(var(--acc-amber-2, 248 176 50));
  --pt-dark: rgb(var(--acc-dark, 37 36 37));
  --pt-gray: rgb(var(--acc-gray, 107 107 107));
  --pt-section: rgb(var(--acc-section, 249 249 249));
  --pt-border: rgb(var(--acc-border, 234 234 235));
  --pt-input-border: rgb(var(--acc-input-border, 213 213 215));
  --pt-amber-soft: #fff6e4;
  --pt-ok: #1f7a4d;
  --pt-ok-soft: #e8f5ee;

  font-family: 'Heebo', system-ui, -apple-system, sans-serif;
  color: var(--pt-gray);
  max-width: 720px;
  margin: 0 auto;
  -webkit-font-smoothing: antialiased;
  text-align: left;
}
.pt-root *, .pt-root *::before, .pt-root *::after { box-sizing: border-box; }
.pt-root p, .pt-root h2, .pt-root h3, .pt-root h4, .pt-root ul, .pt-root li { margin: 0; padding: 0; }
.pt-root button { font-family: inherit; }
/* Our .pt-fld rules set display:flex, which would otherwise beat the UA
   [hidden] rule and leave hidden fields (country / Quebec toggle) visible. */
.pt-root [hidden] { display: none !important; }

.pt-card { background: #fff; border: 1px solid var(--pt-border); border-radius: 16px; box-shadow: 0 18px 50px -30px rgba(37,36,37,.35); overflow: hidden; }

/* ── Head ─────────────────────────────────────────────────────────── */
.pt-head { padding: 28px 28px 20px; border-bottom: 1px solid var(--pt-border); background: linear-gradient(180deg,#fff 0%,var(--pt-section) 100%); }
.pt-eyebrow { display: inline-flex; align-items: center; gap: 7px; background: var(--pt-amber); color: var(--pt-dark); font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; line-height: 1; }
.pt-eyebrow svg { width: 13px; height: 13px; }
.pt-title { font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; color: var(--pt-dark); margin-top: 12px !important; }
.pt-sub { font-size: 15px; line-height: 1.6; margin-top: 8px !important; max-width: 60ch; }
@media (min-width: 640px) { .pt-title { font-size: 27px; } }

.pt-body { padding: 22px 28px 28px; }

/* ── Quick chips ──────────────────────────────────────────────────── */
.pt-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
.pt-quick-lbl { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; color: var(--pt-gray); text-transform: uppercase; letter-spacing: .5px; margin-right: 2px; }
.pt-chip { border: 1px solid var(--pt-input-border); background: #fff; color: var(--pt-dark); font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; padding: 7px 13px; border-radius: 999px; cursor: pointer; transition: border-color .15s, background .15s; }
.pt-chip:hover { border-color: var(--pt-amber-2); background: var(--pt-amber-soft); }

/* ── Fields ───────────────────────────────────────────────────────── */
.pt-fields { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 620px) { .pt-fields:has(.pt-fld--country:not([hidden])) { grid-template-columns: 1fr 1fr; } }
.pt-fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pt-fld label { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: var(--pt-dark); }
.pt-input {
  width: 100%; min-width: 0; height: 46px; padding: 0 12px; border: 1px solid var(--pt-input-border);
  border-radius: 9px; font-size: 15px; font-family: 'Heebo', sans-serif; color: var(--pt-dark); background: #fff;
}
.pt-input:focus { outline: none; border-color: var(--pt-amber-2); box-shadow: 0 0 0 3px rgba(248,176,50,.18); }
.pt-input:disabled { background: var(--pt-section); color: var(--pt-gray); cursor: not-allowed; }
select.pt-input {
  appearance: none; -webkit-appearance: none; padding-right: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
.pt-fld--qc { margin-top: 14px; }

/* ── Quebec segmented toggle ──────────────────────────────────────── */
.pt-seg { display: inline-flex; border: 1px solid var(--pt-input-border); border-radius: 10px; padding: 3px; gap: 3px; background: var(--pt-section); }
.pt-seg-btn { border: 0; background: transparent; color: var(--pt-gray); font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 600; padding: 8px 16px; border-radius: 7px; cursor: pointer; transition: background .15s, color .15s; }
.pt-seg-btn.is-on { background: #fff; color: var(--pt-dark); box-shadow: 0 1px 3px rgba(37,36,37,.12); }

/* ── Result ───────────────────────────────────────────────────────── */
.pt-result { margin-top: 22px; border: 1px solid var(--pt-border); border-radius: 14px; padding: 22px 22px; background: var(--pt-section); min-height: 96px; }
.pt-result--loading { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--pt-gray); font-size: 14.5px; font-weight: 500; }
.pt-spinner { width: 20px; height: 20px; border: 2.5px solid var(--pt-input-border); border-top-color: var(--pt-amber-2); border-radius: 50%; animation: pt-spin .7s linear infinite; }
@keyframes pt-spin { to { transform: rotate(360deg); } }

.pt-empty, .pt-error > div, .pt-nodata { display: flex; align-items: flex-start; gap: 12px; }
.pt-empty { align-items: center; color: var(--pt-gray); font-size: 15px; }
.pt-empty svg, .pt-nodata svg, .pt-error svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--pt-amber-2); margin-top: 1px; }
.pt-empty svg { margin-top: 0; }

.pt-ctx { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: var(--pt-gray); margin-bottom: 12px; }
.pt-big { display: flex; flex-direction: column; gap: 4px; }
.pt-big-lbl { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--pt-gray); }
.pt-big-val { font-family: 'Inter', sans-serif; font-size: 40px; font-weight: 800; line-height: 1.05; color: var(--pt-dark); letter-spacing: -.5px; }
@media (max-width: 480px) { .pt-big-val { font-size: 32px; } }
.pt-result--ok { background: linear-gradient(180deg, var(--pt-ok-soft) 0%, #fff 90%); border-color: #cfe8db; }

.pt-people { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; background: #fff; border: 1px solid var(--pt-border); border-radius: 999px; padding: 7px 14px; font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 600; color: var(--pt-dark); }
.pt-people svg { width: 16px; height: 16px; color: var(--pt-amber-2); }

.pt-nodata b { color: var(--pt-dark); font-family: 'Inter', sans-serif; font-size: 16px; }
.pt-nodata p, .pt-error p { font-size: 13.5px; line-height: 1.55; margin-top: 4px !important; color: var(--pt-gray); }
.pt-error b { color: var(--pt-dark); font-family: 'Inter', sans-serif; font-size: 15.5px; }

.pt-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--pt-border); }
.pt-updated { font-size: 12.5px; color: var(--pt-gray); }
.pt-updated b { color: var(--pt-dark); }
.pt-source { display: inline-flex; align-items: center; gap: 5px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: var(--pt-amber-2); text-decoration: none; }
.pt-source:hover { color: var(--pt-dark); }
.pt-source svg { width: 14px; height: 14px; }

/* ── CTA + disclaimer ─────────────────────────────────────────────── */
.pt-cta {
  display: block; width: 100%; text-align: center; background: var(--pt-amber); color: var(--pt-dark) !important;
  text-decoration: none !important; font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 700;
  padding: 16px 24px; border-radius: 10px; margin-top: 24px; transition: background .15s;
}
.pt-cta:hover { background: var(--pt-amber-2); }
.pt-disclaimer { font-size: 12.5px; line-height: 1.55; color: var(--pt-gray); margin-top: 18px !important; padding-top: 16px; border-top: 1px solid var(--pt-border); }