/* =========================================================
   TradesIreland.ie — shared component styles
   Plain CSS so it works with the Tailwind Play CDN and any build.
   Utilities (Tailwind) may extend/override these classes.
   ========================================================= */

:root {
  --brand-50:#EEF8F4; --brand-100:#D5EEE4; --brand-200:#ABDCC9; --brand-500:#228A6B;
  --brand-600:#136F56; --brand-700:#0F5A47; --brand-900:#0B3B30; --brand-950:#06231C;
  --gorse-50:#FFF8EB; --gorse-100:#FEEBC7; --gorse-400:#F9A12A; --gorse-700:#B04C0C;
  --ink:#0F172A; --text:#334155; --muted:#64748B; --line:#E2E8F0; --line-strong:#CBD5E1;
  --surface:#FFFFFF; --surface-2:#F8FAFC; --surface-3:#F1F5F9;
  --danger:#DC2626; --warning:#D97706; --success:#059669; --info:#0284C7;
  --ring:0 0 0 3px rgba(19,111,86,.28);
  --radius:8px; --radius-card:14px; --radius-lg:18px;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-feature-settings: "cv11", "ss01"; }
h1,h2,h3,h4,.font-display { font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif; letter-spacing: -0.02em; }
::selection { background: var(--brand-100); color: var(--brand-900); }
[hidden] { display: none !important; }
[x-cloak] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Accessibility ---------- */
.skip-link { position:absolute; left:1rem; top:-3rem; z-index:100; background:var(--ink); color:#fff; padding:.6rem 1rem; border-radius:var(--radius); font-weight:600; }
.skip-link:focus { top:1rem; }
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible { outline:none; box-shadow:var(--ring); border-radius:var(--radius); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------- Layout ---------- */
.container-site { width:100%; max-width:76rem; margin-inline:auto; padding-inline:1rem; }
@media (min-width:640px){ .container-site { padding-inline:1.5rem; } }
@media (min-width:1024px){ .container-site { padding-inline:2rem; } }
.section { padding-block:4rem; }
@media (min-width:1024px){ .section { padding-block:6rem; } }
.eyebrow { display:inline-flex; align-items:center; gap:.4rem; font-size:.8125rem; font-weight:600; letter-spacing:.02em; color:var(--brand-600); }
.section-title { font-size:1.875rem; line-height:1.15; font-weight:700; color:var(--ink); }
@media (min-width:1024px){ .section-title { font-size:2.25rem; } }
.lead { font-size:1.0625rem; line-height:1.65; color:var(--muted); }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; height:2.75rem; padding:0 1.1rem;
  border-radius:var(--radius); font-weight:600; font-size:.9375rem; line-height:1; white-space:nowrap; border:1px solid transparent;
  transition:background-color .15s, border-color .15s, color .15s, box-shadow .15s; cursor:pointer; text-decoration:none; }
.btn svg { width:1.125rem; height:1.125rem; flex-shrink:0; }
.btn:disabled,.btn[aria-disabled="true"] { opacity:.55; cursor:not-allowed; }
.btn-sm { height:2.25rem; padding:0 .8rem; font-size:.875rem; }
.btn-sm svg { width:1rem; height:1rem; }
.btn-lg { height:3.25rem; padding:0 1.5rem; font-size:1rem; }
.btn-icon { width:2.5rem; height:2.5rem; padding:0; }
.btn-primary { background:var(--brand-600); color:#fff; }
.btn-primary:hover { background:var(--brand-700); }
.btn-accent { background:var(--gorse-400); color:#3B1D06; }
.btn-accent:hover { background:#F08A0F; }
.btn-secondary { background:#fff; color:var(--ink); border-color:var(--line-strong); }
.btn-secondary:hover { background:var(--surface-2); border-color:#94A3B8; }
.btn-ghost { background:transparent; color:var(--text); }
.btn-ghost:hover { background:var(--surface-3); color:var(--ink); }
.btn-light { background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.25); }
.btn-light:hover { background:rgba(255,255,255,.2); }
.btn-danger { background:var(--danger); color:#fff; }
.btn-danger:hover { background:#B91C1C; }
.btn-link { color:var(--brand-600); font-weight:600; display:inline-flex; align-items:center; gap:.3rem; }
.btn-link:hover { color:var(--brand-700); text-decoration:underline; text-underline-offset:3px; }
.btn-link svg { width:1rem; height:1rem; }

/* ---------- Forms ---------- */
.label { display:block; font-size:.875rem; font-weight:600; color:var(--ink); margin-bottom:.375rem; }
.hint { font-size:.8125rem; color:var(--muted); margin-top:.375rem; }
.input, .select, .textarea { width:100%; height:2.75rem; padding:0 .875rem; border:1px solid var(--line-strong); border-radius:var(--radius);
  background:#fff; color:var(--ink); font-size:.9375rem; transition:border-color .15s, box-shadow .15s; }
.textarea { height:auto; min-height:7rem; padding:.7rem .875rem; line-height:1.55; resize:vertical; }
.select { appearance:none; padding-right:2.25rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .75rem center; }
.input::placeholder, .textarea::placeholder { color:#94A3B8; }
.input:hover, .select:hover, .textarea:hover { border-color:#94A3B8; }
.input:focus, .select:focus, .textarea:focus { outline:none; border-color:var(--brand-600); box-shadow:var(--ring); }
.input.is-invalid, .select.is-invalid, .textarea.is-invalid { border-color:var(--danger); }
.input.is-invalid:focus { box-shadow:0 0 0 3px rgba(220,38,38,.2); }
.field-error { display:flex; gap:.35rem; align-items:center; font-size:.8125rem; color:var(--danger); margin-top:.375rem; }
.field-error svg { width:.9rem; height:.9rem; }
.input-icon { position:relative; }
.input-icon > svg, .input-icon > i { position:absolute; left:.8rem; top:50%; transform:translateY(-50%); width:1.125rem; height:1.125rem; color:#94A3B8; pointer-events:none; }
.input-icon > .input { padding-left:2.5rem; }
.check { width:1.1rem; height:1.1rem; accent-color:var(--brand-600); }

/* Toggle switch */
.switch { position:relative; display:inline-flex; width:2.5rem; height:1.4rem; flex-shrink:0; }
.switch input { opacity:0; position:absolute; inset:0; width:100%; height:100%; margin:0; z-index:1; cursor:pointer; } /* covers the track so a bare .switch (not inside a <label>) is still clickable */
.switch span { position:absolute; inset:0; background:var(--line-strong); border-radius:999px; transition:background .15s; cursor:pointer; }
.switch span::after { content:""; position:absolute; left:.2rem; top:.2rem; width:1rem; height:1rem; background:#fff; border-radius:50%; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:transform .15s; }
.switch input:checked + span { background:var(--brand-600); }
.switch input:checked + span::after { transform:translateX(1.1rem); }
.switch input:focus-visible + span { box-shadow:var(--ring); }

/* ---------- Badges & chips ---------- */
.badge { display:inline-flex; align-items:center; gap:.3rem; height:1.5rem; padding:0 .55rem; border-radius:999px;
  font-size:.75rem; font-weight:600; line-height:1; white-space:nowrap; border:1px solid transparent; }
.badge svg { width:.8rem; height:.8rem; }
.badge-neutral { background:var(--surface-3); color:#475569; }
.badge-brand, .badge-verified { background:var(--brand-50); color:var(--brand-700); border-color:var(--brand-100); }
.badge-featured { background:var(--gorse-100); color:var(--gorse-700); border-color:#FDD58A; }
.badge-premium { background:#0B3B30; color:#D5EEE4; }
.badge-success { background:#ECFDF5; color:#047857; }
.badge-warning { background:#FFFBEB; color:#B45309; }
.badge-danger { background:#FEF2F2; color:#B91C1C; }
.badge-info { background:#F0F9FF; color:#0369A1; }
.badge-dot::before { content:""; width:.4rem; height:.4rem; border-radius:50%; background:currentColor; }

.chip { display:inline-flex; align-items:center; gap:.4rem; height:2.25rem; padding:0 .9rem; border-radius:999px; border:1px solid var(--line-strong);
  background:#fff; color:var(--text); font-size:.875rem; font-weight:500; transition:all .15s; cursor:pointer; white-space:nowrap; }
.chip svg { width:1rem; height:1rem; }
.chip:hover { border-color:var(--brand-500); color:var(--brand-700); }
.chip.is-active, .chip[aria-pressed="true"] { background:var(--brand-600); border-color:var(--brand-600); color:#fff; }
.tag { display:inline-flex; align-items:center; height:1.6rem; padding:0 .6rem; border-radius:6px; background:var(--surface-3); color:#475569; font-size:.78rem; font-weight:500; }

/* ---------- Cards ---------- */
.card { background:#fff; border:1px solid var(--line); border-radius:var(--radius-card); box-shadow:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06); }
.card-hover { transition:box-shadow .15s, border-color .15s; }
.card-hover:hover { border-color:var(--line-strong); box-shadow:0 12px 32px -12px rgba(15,23,42,.22), 0 2px 6px rgba(15,23,42,.05); }
.card-featured { border-color:#FBBA4D; box-shadow:0 0 0 1px #FBBA4D, 0 12px 28px -14px rgba(240,138,15,.35); }

/* Cover placeholders (swap for real images: <img class="cover-img">) */
.cover { position:relative; overflow:hidden; background:linear-gradient(135deg,var(--c1,#136F56),var(--c2,#0B3B30)); }
.cover::after { content:""; position:absolute; inset:0; opacity:.18;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60' viewBox='0 0 120 60'%3E%3Cpath d='M0 45 L30 20 L60 45 L90 20 L120 45' fill='none' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E"); }
.logo-tile { display:grid; place-items:center; font-family:"Plus Jakarta Sans",sans-serif; font-weight:800; color:#fff; letter-spacing:-.02em; }

/* Hero pattern */
.hero-pattern { background-color:var(--brand-950);
  background-image:radial-gradient(ellipse 80% 60% at 85% 10%, rgba(34,138,107,.35), transparent 60%),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(249,161,42,.12), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80' viewBox='0 0 160 80'%3E%3Cpath d='M0 60 Q40 30 80 50 T160 40' fill='none' stroke='%23ffffff' stroke-opacity='.05' stroke-width='1.2'/%3E%3Cpath d='M0 75 Q40 45 80 65 T160 55' fill='none' stroke='%23ffffff' stroke-opacity='.04' stroke-width='1.2'/%3E%3C/svg%3E"); }

/* ---------- Dropdowns / menus ---------- */
.menu { position:absolute; z-index:50; min-width:14rem; background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 12px 32px -12px rgba(15,23,42,.22), 0 2px 6px rgba(15,23,42,.05); padding:.4rem; }
.menu-item { display:flex; align-items:center; gap:.65rem; padding:.55rem .7rem; border-radius:8px; font-size:.9rem; color:var(--text); }
.menu-item svg { width:1.05rem; height:1.05rem; color:#94A3B8; }
.menu-item:hover { background:var(--surface-2); color:var(--ink); }
.menu-item:hover svg { color:var(--brand-600); }
.nav-link { display:inline-flex; align-items:center; gap:.3rem; height:2.5rem; padding:0 .8rem; border-radius:8px; font-size:.9375rem; font-weight:500; color:#334155; white-space:nowrap; }
.nav-link:hover, .nav-link[aria-expanded="true"] { background:var(--surface-3); color:var(--ink); }
.nav-link svg { width:1rem; height:1rem; transition:transform .15s; }
.nav-link[aria-expanded="true"] svg { transform:rotate(180deg); }

/* ---------- Autocomplete ---------- */
.ac-wrap { position:relative; }
.ac-list { position:absolute; left:0; right:0; top:calc(100% + .4rem); z-index:60; background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 12px 32px -12px rgba(15,23,42,.25); padding:.35rem; max-height:20rem; overflow:auto; text-align:left; }
.ac-item { display:flex; align-items:center; gap:.6rem; padding:.55rem .65rem; border-radius:8px; cursor:pointer; font-size:.9rem; color:var(--text); }
.ac-item mark { background:none; color:var(--brand-700); font-weight:700; }
.ac-item:hover, .ac-item.is-active { background:var(--brand-50); color:var(--ink); }

/* ---------- Tabs ---------- */
.tab-list { display:inline-flex; gap:.25rem; padding:.25rem; background:var(--surface-3); border-radius:10px; }
.tab-btn { height:2.4rem; padding:0 1rem; border-radius:8px; font-weight:600; font-size:.9rem; color:#475569; transition:all .15s; }
.tab-btn:hover { color:var(--ink); }
.tab-btn.is-active { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(15,23,42,.12); }
.tab-line { display:flex; gap:1.5rem; border-bottom:1px solid var(--line); overflow-x:auto; }
.tab-line .tab-btn { height:auto; padding:.8rem 0; border-radius:0; background:none; box-shadow:none; border-bottom:2px solid transparent; margin-bottom:-1px; }
.tab-line .tab-btn.is-active { border-color:var(--brand-600); color:var(--brand-700); }

/* ---------- Accordion ---------- */
.accordion-item { border-bottom:1px solid var(--line); }
.accordion-item summary { list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.15rem 0; cursor:pointer; font-weight:600; color:var(--ink); font-size:1.02rem; }
.accordion-item summary::-webkit-details-marker { display:none; }
.accordion-item summary .chev { width:1.25rem; height:1.25rem; color:#64748B; flex-shrink:0; transition:transform .2s; }
.accordion-item[open] summary .chev { transform:rotate(180deg); color:var(--brand-600); }
.accordion-item .accordion-body { padding:0 2rem 1.25rem 0; color:var(--muted); line-height:1.65; }

/* ---------- Modal ---------- */
.modal { position:fixed; inset:0; z-index:90; display:flex; align-items:flex-end; justify-content:center; padding:1rem; }
@media (min-width:640px){ .modal { align-items:center; } }
.modal.hidden { display:none; }
.modal-backdrop { position:absolute; inset:0; background:rgba(15,23,42,.55); }
.modal-panel { position:relative; width:100%; max-width:32rem; max-height:calc(100vh - 2rem); overflow:auto; background:#fff; border-radius:var(--radius-lg); box-shadow:0 25px 60px -15px rgba(15,23,42,.4); }
body.modal-open { overflow:hidden; }

/* ---------- Alerts & toasts ---------- */
.alert { display:flex; gap:.75rem; padding:.9rem 1rem; border-radius:10px; border:1px solid; font-size:.9rem; line-height:1.5; }
.alert > svg { width:1.25rem; height:1.25rem; flex-shrink:0; margin-top:.05rem; }
.alert-info { background:#F0F9FF; border-color:#BAE6FD; color:#075985; }
.alert-success { background:#ECFDF5; border-color:#A7F3D0; color:#065F46; }
.alert-warning { background:#FFFBEB; border-color:#FDE68A; color:#92400E; }
.alert-danger { background:#FEF2F2; border-color:#FECACA; color:#991B1B; }
.toast-stack { position:fixed; right:1rem; bottom:1rem; z-index:100; display:flex; flex-direction:column; gap:.5rem; max-width:calc(100vw - 2rem); }
.toast { display:flex; align-items:center; gap:.65rem; min-width:16rem; padding:.8rem 1rem; background:var(--ink); color:#fff; border-radius:10px; font-size:.9rem; box-shadow:0 12px 32px -12px rgba(15,23,42,.5); }
.toast svg { width:1.15rem; height:1.15rem; }

/* ---------- Loading ---------- */
.skeleton { background:linear-gradient(90deg,#EEF2F6 25%,#F8FAFC 37%,#EEF2F6 63%); background-size:400% 100%; animation:shimmer 1.4s ease infinite; border-radius:6px; }
@keyframes shimmer { 0%{background-position:100% 50%} 100%{background-position:0 50%} }
.spinner { width:1.1rem; height:1.1rem; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .7s linear infinite; display:inline-block; }
@keyframes spin { to { transform:rotate(360deg) } }

/* ---------- Tooltip ---------- */
.tip { position:relative; display:inline-flex; }
.tip [role="tooltip"] { position:absolute; bottom:calc(100% + .5rem); left:50%; transform:translateX(-50%); width:max-content; max-width:16rem;
  background:var(--ink); color:#fff; font-size:.78rem; line-height:1.4; padding:.45rem .65rem; border-radius:6px; display:none; pointer-events:none; z-index:70; font-weight:400; }
.tip:hover [role="tooltip"], .tip:focus-within [role="tooltip"] { display:block; }

/* ---------- Pagination ---------- */
.pagination { display:flex; align-items:center; gap:.25rem; }
.page-btn { min-width:2.4rem; height:2.4rem; padding:0 .6rem; display:inline-grid; place-items:center; border-radius:8px; font-size:.9rem; font-weight:500; color:var(--text); border:1px solid transparent; }
.page-btn:hover { background:var(--surface-3); }
.page-btn[aria-current="page"] { background:var(--brand-600); color:#fff; }
.page-btn:disabled { opacity:.4; pointer-events:none; }
.page-btn svg { width:1rem; height:1rem; }

/* ---------- Utilities ---------- */
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.scrollbar-none { scrollbar-width:none; } .scrollbar-none::-webkit-scrollbar { display:none; }
.prose-ti p { margin-bottom:1rem; line-height:1.7; }
.prose-ti h2 { font-size:1.5rem; font-weight:700; color:var(--ink); margin:2rem 0 .75rem; }
.prose-ti h3 { font-size:1.2rem; font-weight:700; color:var(--ink); margin:1.5rem 0 .5rem; }
.prose-ti ul { list-style:disc; padding-left:1.25rem; margin-bottom:1rem; }
.prose-ti a { color:var(--brand-600); text-decoration:underline; text-underline-offset:3px; }

/* =========================================================
   Phase 4 — directory components
   ========================================================= */

/* Page header used by all directory templates */
.page-hero { position:relative; background:linear-gradient(180deg,#EEF8F4 0%,#F8FAFC 100%); overflow:hidden; }
.page-hero::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80' viewBox='0 0 160 80'%3E%3Cpath d='M0 60 Q40 30 80 50 T160 40' fill='none' stroke='%23136F56' stroke-opacity='.06' stroke-width='1.2'/%3E%3C/svg%3E"); }
.page-hero > * { position:relative; }

/* Breadcrumb */
.breadcrumb ol { display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; font-size:.84rem; color:var(--muted); }
.breadcrumb li { display:inline-flex; align-items:center; gap:.35rem; }
.breadcrumb li + li::before { content:""; width:.4rem; height:.4rem; border-right:1.5px solid #94A3B8; border-top:1.5px solid #94A3B8; transform:rotate(45deg); margin-right:.2rem; }
.breadcrumb a { color:var(--muted); }
.breadcrumb a:hover { color:var(--brand-700); text-decoration:underline; text-underline-offset:3px; }
.breadcrumb [aria-current="page"] { color:var(--ink); font-weight:600; }

/* Inline stat strip in page headers */
.stat-strip { display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; font-size:.9rem; color:var(--muted); }
.stat-strip span { display:inline-flex; align-items:center; gap:.4rem; }
.stat-strip b { color:var(--ink); font-weight:700; }
.stat-strip svg { width:1rem; height:1rem; color:var(--brand-600); }

/* Option pills (styled radio / checkbox) */
.opt { position:relative; display:block; }
.opt input { position:absolute; opacity:0; inset:0; cursor:pointer; }
.opt span { display:flex; align-items:center; justify-content:center; gap:.35rem; height:2.25rem; padding:0 .6rem; border:1px solid var(--line-strong); border-radius:8px; font-size:.85rem; font-weight:500; color:var(--text); background:#fff; transition:all .15s; }
.opt input:hover + span { border-color:var(--brand-500); }
.opt input:checked + span { background:var(--brand-50); border-color:var(--brand-600); color:var(--brand-700); font-weight:600; }
.opt input:focus-visible + span { box-shadow:var(--ring); }
.check-row { display:flex; align-items:center; gap:.6rem; padding:.3rem 0; font-size:.9rem; color:var(--text); cursor:pointer; }
.check-row .count { margin-left:auto; font-size:.78rem; color:#94A3B8; }

/* Segmented control (view toggle) */
.seg { display:inline-flex; padding:.2rem; background:var(--surface-3); border-radius:9px; }
.seg button { display:inline-flex; align-items:center; gap:.35rem; height:2rem; padding:0 .65rem; border-radius:7px; font-size:.84rem; font-weight:600; color:#475569; }
.seg button svg { width:1rem; height:1rem; }
.seg button[aria-pressed="true"] { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(15,23,42,.12); }

/* Removable filter chip */
.chip-x { display:inline-flex; align-items:center; gap:.35rem; height:1.9rem; padding:0 .4rem 0 .7rem; border-radius:999px; background:var(--brand-50); color:var(--brand-700); font-size:.82rem; font-weight:600; border:1px solid var(--brand-100); }
.chip-x button { display:grid; place-items:center; width:1.2rem; height:1.2rem; border-radius:50%; }
.chip-x button:hover { background:var(--brand-100); }
.chip-x svg { width:.8rem; height:.8rem; }

/* Drawer variant of modal (mobile filters) */
.modal.drawer { padding:0; align-items:stretch; justify-content:flex-end; }
.modal.drawer .modal-panel { max-width:24rem; height:100%; max-height:none; border-radius:0; display:flex; flex-direction:column; }

/* Map placeholder (swap for Leaflet / Mapbox) */
.map-ph { background-color:#E8F1EC;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.7) 2px, transparent 2px), linear-gradient(rgba(255,255,255,.7) 2px, transparent 2px),
    radial-gradient(ellipse 30% 22% at 70% 35%, rgba(56,152,201,.28), transparent 70%),
    radial-gradient(ellipse 18% 40% at 30% 60%, rgba(56,152,201,.22), transparent 70%);
  background-size:96px 96px, 96px 96px, 100% 100%, 100% 100%; }
.map-pin { position:absolute; transform:translate(-50%,-100%); display:grid; place-items:center; width:2rem; height:2rem; border-radius:999px 999px 999px 0; rotate:-45deg;
  background:var(--brand-600); color:#fff; font-size:.75rem; font-weight:700; box-shadow:0 4px 10px rgba(15,23,42,.3); border:2px solid #fff; }
.map-pin > span { rotate:45deg; }
.map-pin.is-featured { background:var(--gorse-400); color:#3B1D06; }
.map-pin:hover, .map-pin.is-active { background:var(--ink); color:#fff; z-index:5; }

/* Sticky sidebar helper */
@media (min-width:1024px){ .sticky-side { position:sticky; top:5.5rem; } }

/* A–Z jump bar */
.az { display:flex; flex-wrap:wrap; gap:.25rem; }
.az a, .az span { display:grid; place-items:center; width:2rem; height:2rem; border-radius:6px; font-size:.85rem; font-weight:600; }
.az a { color:var(--brand-700); background:#fff; border:1px solid var(--line); }
.az a:hover { background:var(--brand-50); border-color:var(--brand-200); }
.az span { color:#CBD5E1; }

/* Link lists used in SEO/related sections */
.link-grid a { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.55rem .75rem; border-radius:8px; color:var(--text); font-size:.92rem; }
.link-grid a:hover { background:#fff; color:var(--brand-700); box-shadow:0 1px 3px rgba(15,23,42,.08); }
.link-grid a small { color:#94A3B8; font-size:.78rem; }

/* =========================================================
   Phase 5 — profile, wizards, forms
   ========================================================= */

/* Stepper (multi-step forms) */
.stepper { display:flex; align-items:flex-start; gap:.5rem; counter-reset:step; }
.stepper li { flex:1; display:flex; flex-direction:column; align-items:center; gap:.4rem; position:relative; text-align:center; font-size:.78rem; font-weight:600; color:#94A3B8; }
.stepper li::before { content:""; position:absolute; top:.95rem; left:calc(-50% + 1.2rem); right:calc(50% + 1.2rem); height:2px; background:var(--line); }
.stepper li:first-child::before { display:none; }
.stepper .dot { position:relative; z-index:1; display:grid; place-items:center; width:1.9rem; height:1.9rem; border-radius:50%; background:#fff; border:2px solid var(--line-strong); color:#64748B; font-size:.8rem; font-weight:700; }
.stepper .dot svg { width:1rem; height:1rem; }
.stepper li.is-current { color:var(--ink); }
.stepper li.is-current .dot { border-color:var(--brand-600); color:var(--brand-700); box-shadow:0 0 0 4px rgba(19,111,86,.12); }
.stepper li.is-done { color:var(--brand-700); }
.stepper li.is-done .dot { background:var(--brand-600); border-color:var(--brand-600); color:#fff; }
.stepper li.is-done::before, .stepper li.is-current::before { background:var(--brand-600); }
@media (max-width:639px){ .stepper .lbl { display:none; } }
.progress { height:.4rem; border-radius:999px; background:var(--surface-3); overflow:hidden; }
.progress > span { display:block; height:100%; background:var(--brand-600); border-radius:inherit; transition:width .25s; }

/* Choice cards (large radio/checkbox tiles) */
.choice { position:relative; display:block; cursor:pointer; }
.choice input { position:absolute; opacity:0; inset:0; cursor:pointer; }
.choice .choice-body { display:flex; align-items:center; gap:.75rem; height:100%; padding:.9rem 1rem; border:1.5px solid var(--line-strong); border-radius:12px; background:#fff; transition:all .15s; }
.choice .choice-body > svg { width:1.4rem; height:1.4rem; color:#64748B; flex-shrink:0; }
.choice:hover .choice-body { border-color:var(--brand-500); }
.choice input:checked + .choice-body { border-color:var(--brand-600); background:var(--brand-50); box-shadow:inset 0 0 0 1px var(--brand-600); }
.choice input:checked + .choice-body > svg { color:var(--brand-600); }
.choice input:focus-visible + .choice-body { box-shadow:var(--ring); }
.choice .tick { margin-left:auto; display:grid; place-items:center; width:1.25rem; height:1.25rem; border-radius:50%; border:1.5px solid var(--line-strong); flex-shrink:0; }
.choice input:checked + .choice-body .tick { background:var(--brand-600); border-color:var(--brand-600); }
.choice input:checked + .choice-body .tick::after { content:""; width:.35rem; height:.6rem; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg) translate(-1px,-1px); }
.field.has-error .choice-body { border-color:#FCA5A5; }

/* Star rating input */
.star-input { display:inline-flex; flex-direction:row-reverse; gap:.15rem; }
.star-input input { position:absolute; opacity:0; width:0; height:0; }
.star-input label { cursor:pointer; color:#CBD5E1; }
.star-input label svg { width:2rem; height:2rem; fill:currentColor; }
.star-input label:hover, .star-input label:hover ~ label, .star-input input:checked ~ label { color:var(--gorse-400); }
.star-input input:focus-visible + label { outline:2px solid var(--brand-600); border-radius:4px; }

/* OTP code inputs */
.otp { display:flex; gap:.5rem; }
.otp input { width:3rem; height:3.5rem; text-align:center; font-size:1.4rem; font-weight:700; border:1.5px solid var(--line-strong); border-radius:10px; color:var(--ink); }
.otp input:focus { outline:none; border-color:var(--brand-600); box-shadow:var(--ring); }
@media (max-width:400px){ .otp input { width:2.6rem; height:3.1rem; } }

/* Lightbox */
.lightbox .modal-panel { max-width:64rem; background:#0B1220; color:#fff; }
.lightbox-stage { position:relative; aspect-ratio:16/10; display:grid; place-items:center; }
.lightbox-nav { position:absolute; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:2.75rem; height:2.75rem; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; }
.lightbox-nav:hover { background:rgba(255,255,255,.25); }
.lightbox-thumbs button { flex-shrink:0; width:4.5rem; height:3rem; border-radius:6px; overflow:hidden; opacity:.55; border:2px solid transparent; }
.lightbox-thumbs button[aria-current="true"] { opacity:1; border-color:#fff; }

/* Gallery tile (placeholder imagery — replace .cover with <img>) */
.gallery-tile { position:relative; overflow:hidden; border-radius:12px; aspect-ratio:4/3; }
.gallery-tile figcaption { position:absolute; inset:auto 0 0 0; padding:1.5rem .75rem .6rem; font-size:.8rem; font-weight:500; color:#fff; background:linear-gradient(transparent, rgba(0,0,0,.55)); opacity:0; transition:opacity .15s; }
.gallery-tile:hover figcaption, .gallery-tile:focus-visible figcaption { opacity:1; }

/* Rating distribution bars */
.bar { height:.5rem; border-radius:999px; background:var(--surface-3); overflow:hidden; }
.bar > span { display:block; height:100%; background:var(--gorse-400); border-radius:inherit; }

/* Section nav (profile) */
.section-nav a { display:inline-flex; align-items:center; height:3rem; padding:0 .25rem; border-bottom:2px solid transparent; font-size:.92rem; font-weight:600; color:#64748B; white-space:nowrap; }
.section-nav a:hover { color:var(--ink); }
.section-nav a.is-active { color:var(--brand-700); border-color:var(--brand-600); }

/* Upload thumbnails */
.thumb { position:relative; width:5.5rem; height:5.5rem; border-radius:10px; overflow:hidden; background:var(--surface-3); }
.thumb img { width:100%; height:100%; object-fit:cover; }
.thumb button { position:absolute; top:.25rem; right:.25rem; display:grid; place-items:center; width:1.5rem; height:1.5rem; border-radius:50%; background:rgba(15,23,42,.75); color:#fff; }
.thumb button svg { width:.85rem; height:.85rem; }
.dropzone.is-drag { border-color:var(--brand-600); background:var(--brand-50); }

/* Mobile sticky action bar */
.action-bar { position:fixed; inset:auto 0 0 0; z-index:35; display:flex; gap:.5rem; padding:.65rem 1rem calc(.65rem + env(safe-area-inset-bottom)); background:rgba(255,255,255,.97); border-top:1px solid var(--line); box-shadow:0 -6px 20px -12px rgba(15,23,42,.25); }
@media (min-width:1024px){ .action-bar { display:none; } }

/* =========================================================
   Phase 6 — info pages
   ========================================================= */
.breadcrumb-dark a, .breadcrumb-dark ol { color:rgba(213,238,228,.7); }
.breadcrumb-dark a:hover { color:#fff; }
.breadcrumb-dark [aria-current="page"] { color:#fff; }
.breadcrumb-dark li + li::before { border-color:rgba(213,238,228,.5); }

/* Long-form article / legal typography */
.article { font-size:1.0625rem; line-height:1.75; color:var(--text); }
.article > * + * { margin-top:1.1rem; }
.article h2 { font-size:1.6rem; line-height:1.25; font-weight:700; color:var(--ink); margin-top:2.75rem; scroll-margin-top:7rem; }
.article h3 { font-size:1.2rem; font-weight:700; color:var(--ink); margin-top:2rem; scroll-margin-top:7rem; }
.article ul, .article ol { padding-left:1.35rem; }
.article ul { list-style:disc; } .article ol { list-style:decimal; }
.article li + li { margin-top:.4rem; }
.article li::marker { color:var(--brand-600); }
.article a { color:var(--brand-600); font-weight:500; text-decoration:underline; text-underline-offset:3px; }
.article strong { color:var(--ink); }
.article table { width:100%; font-size:.95rem; border-collapse:collapse; }
.article th { text-align:left; font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); background:var(--surface-2); padding:.7rem 1rem; }
.article td { padding:.8rem 1rem; border-top:1px solid var(--line); }
.callout { display:flex; gap:.85rem; padding:1.1rem 1.25rem; border-radius:12px; background:var(--brand-50); border:1px solid var(--brand-100); color:var(--brand-900); font-size:.97rem; line-height:1.6; }
.callout > svg { width:1.3rem; height:1.3rem; flex-shrink:0; margin-top:.15rem; color:var(--brand-600); }
.callout.is-warning { background:var(--gorse-50); border-color:#FDD58A; color:#5B2A0A; }
.callout.is-warning > svg { color:var(--gorse-600, #D46A09); }

/* Table of contents */
.toc a { display:block; padding:.4rem 0 .4rem .9rem; border-left:2px solid var(--line); font-size:.9rem; color:var(--muted); }
.toc a:hover { color:var(--ink); }
.toc a.is-active { border-color:var(--brand-600); color:var(--brand-700); font-weight:600; }

/* Reading progress */
.read-progress { position:fixed; top:0; left:0; height:3px; background:var(--brand-600); z-index:60; width:0; }

/* =========================================================
   Phase 8 — dashboard shell (shared by trade / account / admin)
   ========================================================= */
body.dash { background:#F4F6F8; }
.dash-sidebar { position:fixed; inset:0 auto 0 0; z-index:50; width:16rem; display:flex; flex-direction:column; background:var(--brand-950); color:#D5EEE4;
  transform:translateX(-100%); transition:transform .2s ease, width .2s ease; }
.dash-backdrop { position:fixed; inset:0; z-index:45; background:rgba(15,23,42,.5); display:none; }
body.sidebar-open .dash-sidebar { transform:none; box-shadow:0 20px 60px rgba(0,0,0,.35); }
body.sidebar-open .dash-backdrop { display:block; }
.dash-body { min-height:100vh; display:flex; flex-direction:column; transition:padding .2s ease; }
.dash-header { position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:.5rem; height:4rem; padding:0 1rem; background:rgba(255,255,255,.95); border-bottom:1px solid var(--line); backdrop-filter:blur(8px); }
.dash-main { flex:1; width:100%; max-width:84rem; margin:0 auto; padding:1.5rem 1rem 3rem; }
@media (min-width:640px){ .dash-main { padding:2rem 1.5rem 4rem; } .dash-header { padding:0 1.5rem; } }
@media (min-width:1024px){
  .dash-sidebar { transform:none; }
  .dash-body { padding-left:16rem; }
  .dash-backdrop { display:none !important; }
  body.is-collapsed .dash-sidebar { width:4.5rem; }
  body.is-collapsed .dash-body { padding-left:4.5rem; }
  body.is-collapsed .nav-label, body.is-collapsed .nav-group, body.is-collapsed .dash-sidebar-footer, body.is-collapsed .dash-logo > span > span:last-child { display:none; }
  body.is-collapsed .nav-item { justify-content:center; padding:0; }
  body.is-collapsed .nav-badge { position:absolute; top:.15rem; right:.35rem; min-width:1rem; height:1rem; font-size:.6rem; padding:0 .25rem; }
  body.is-collapsed .nav-item:hover::after { content:attr(data-tip); position:absolute; left:calc(100% + .6rem); top:50%; transform:translateY(-50%); white-space:nowrap;
    background:var(--ink); color:#fff; font-size:.78rem; font-weight:500; padding:.35rem .6rem; border-radius:6px; z-index:60; }
  body.is-collapsed .dash-sidebar > div:first-child { justify-content:center; padding:0; }
}
@media (prefers-reduced-motion: reduce){ .dash-sidebar, .dash-body { transition:none; } }
.dash-logo svg { flex-shrink:0; }
.nav-group { padding:0 .75rem .4rem; font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:rgba(213,238,228,.45); }
.nav-item { position:relative; display:flex; align-items:center; gap:.7rem; height:2.4rem; padding:0 .75rem; border-radius:8px; font-size:.9rem; font-weight:500; color:rgba(213,238,228,.8); }
.nav-item svg { width:1.15rem; height:1.15rem; flex-shrink:0; }
.nav-item:hover { background:rgba(255,255,255,.07); color:#fff; }
.nav-item.is-active { background:rgba(255,255,255,.12); color:#fff; box-shadow:inset 3px 0 0 var(--gorse-400); }
.nav-item:focus-visible { box-shadow:0 0 0 2px var(--gorse-400); }
.nav-badge { margin-left:auto; display:grid; place-items:center; min-width:1.35rem; height:1.35rem; padding:0 .35rem; border-radius:999px; background:var(--gorse-400); color:#3B1D06; font-size:.7rem; font-weight:700; }

/* Page header inside dashboards */
.page-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; }
.page-head h1 { font-size:1.6rem; line-height:1.2; font-weight:800; color:var(--ink); }
@media (min-width:640px){ .page-head h1 { font-size:1.85rem; } }
.page-head p { color:var(--muted); margin-top:.25rem; }

/* Stat tiles */
.stat { background:#fff; border:1px solid var(--line); border-radius:var(--radius-card); padding:1.1rem 1.2rem; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.stat-label { display:flex; align-items:center; justify-content:space-between; gap:.5rem; font-size:.85rem; color:var(--muted); }
.stat-label svg { width:1rem; height:1rem; color:#94A3B8; }
.stat-value { margin-top:.35rem; font-family:"Plus Jakarta Sans",sans-serif; font-size:1.75rem; line-height:1.15; font-weight:800; color:var(--ink); letter-spacing:-.02em; }
.delta { display:inline-flex; align-items:center; gap:.2rem; font-size:.8rem; font-weight:600; }
.delta svg { width:.9rem; height:.9rem; }
.delta-up { color:#047857; } .delta-down { color:#B91C1C; } .delta-flat { color:var(--muted); }

/* Charts */
.chart-axis { font-size:11px; fill:#64748B; font-family:Inter, sans-serif; }
.chart-tip { position:absolute; z-index:5; transform:translate(-50%, calc(-100% - 8px)); pointer-events:none; min-width:7rem; padding:.5rem .65rem; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 24px -8px rgba(15,23,42,.25); opacity:0; transition:opacity .1s; }
.chart-tip.is-on { opacity:1; }
.chart-bar { cursor:default; outline:none; }
.chart-bar path { transition:opacity .1s; }
.chart-bar.is-dim path { opacity:.45; }
.chart-bar:focus-visible path { stroke:var(--ink); stroke-width:2; }
.chart svg:focus-visible { outline:2px solid var(--brand-600); outline-offset:4px; border-radius:4px; }

/* Data tables */
.data-table thead th { padding:.7rem 1rem; font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); background:var(--surface-2); border-bottom:1px solid var(--line); white-space:nowrap; }
.data-table tbody td { padding:.8rem 1rem; border-bottom:1px solid #F1F5F9; vertical-align:middle; }
.data-table tbody tr:hover { background:#F8FAFC; }
.data-table tbody tr.is-selected { background:var(--brand-50); }
.data-table tbody tr:last-child td { border-bottom:0; }
.bulk-bar { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; padding:.65rem 1rem; background:var(--brand-50); border-bottom:1px solid var(--brand-100); }

/* Chat */
.bubble { max-width:min(36rem, 85%); padding:.7rem .95rem; border-radius:14px; font-size:.93rem; line-height:1.55; white-space:pre-line; }
.bubble-them { background:#fff; border:1px solid var(--line); border-bottom-left-radius:4px; color:var(--text); }
.bubble-me { margin-left:auto; background:var(--brand-600); color:#fff; border-bottom-right-radius:4px; }

/* Save bar for edit forms */
.save-bar { position:sticky; bottom:0; z-index:30; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem; margin-top:1.5rem; padding:.85rem 1rem; background:var(--ink); color:#fff; border-radius:12px; box-shadow:0 12px 30px -10px rgba(15,23,42,.45); }

/* Settings list rows */
.setting-row { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1.1rem 0; border-bottom:1px solid #F1F5F9; }
.setting-row:last-child { border-bottom:0; }
/* Grid children in dashboards may hold wide content (charts, tables): let them shrink */
.dash-main .grid > * { min-width:0; }
@media (min-width:1024px){ body.dash #consent-banner { left:16rem; } body.dash.is-collapsed #consent-banner { left:4.5rem; } }
/* Keep absolutely-positioned children (e.g. .sr-only labels in table cells) inside horizontal scrollers */
.overflow-x-auto { position: relative; }