/* =====================================================================
   PrimeHarbor — components.css
   Buttons, cards, panels, tabs, accordions, tables, filters, forms,
   timelines, stats, comparison, horizontal scroll, prose, cookie UI.
   ===================================================================== */

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; gap:.55em; padding:.9em 1.6em; border-radius: var(--r-pill); font-family: var(--ff-display); font-weight:600; font-size:.95rem; transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), color var(--t-fast); }
.btn svg { width:1.1em; height:1.1em; }
.btn--primary { background: var(--g-panel); color:#fff; box-shadow: var(--sh-blue); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 26px 50px -20px rgba(10,132,255,.85); }
.btn--cyan { background: var(--cyan); color: var(--navy); }
.btn--cyan:hover { background: var(--cyan-soft); transform: translateY(-2px); }
.btn--navy { background: var(--navy); color:#fff; }
.btn--navy:hover { background: var(--navy-900); transform: translateY(-2px); }
.btn--outline { border:1.6px solid var(--ocean); color: var(--ocean); }
.btn--outline:hover { background: var(--ocean); color:#fff; }
.btn--glass { background: rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.4); backdrop-filter: blur(8px); }
.btn--glass:hover { background: rgba(255,255,255,.24); }
.btn--ghost { background: var(--light); color: var(--navy); }
.btn--ghost:hover { background: var(--sand); }
.arrow { display:inline-flex; align-items:center; gap:.45em; font-family: var(--ff-display); font-weight:600; color: var(--ocean); }
.arrow svg { width:1em; transition: transform var(--t-fast); }
.arrow:hover svg { transform: translateX(4px); }
.on-dark .arrow { color: var(--cyan-soft); }

/* ---------- chips / badges ---------- */
.chip { display:inline-flex; align-items:center; gap:.4em; font-family: var(--ff-display); font-size:.76rem; font-weight:600; padding:.42em .9em; border-radius: var(--r-pill); background: var(--light); color: var(--navy); }
.chip--ocean { background: rgba(10,132,255,.14); color: var(--ocean-deep); }
.chip--cyan { background: rgba(34,211,238,.18); color: #0a7d8c; }
.chip--sand { background: var(--sand); color: #7a6a45; }
.chip--glass { background: rgba(255,255,255,.16); color:#fff; backdrop-filter: blur(6px); }
.chips { display:flex; flex-wrap:wrap; gap:.5rem; }

/* ---------- glass card (over imagery/gradients) ---------- */
.glass { background: rgba(255,255,255,.12); backdrop-filter: blur(16px) saturate(150%); border:1px solid rgba(255,255,255,.28); border-radius: var(--r-lg); box-shadow: var(--sh-2); }

/* ---------- standard card ---------- */
.card { background:#fff; border-radius: var(--r-lg); border:1px solid var(--line); box-shadow: var(--sh-1); overflow:hidden; transition: transform var(--t), box-shadow var(--t); display:flex; flex-direction:column; }
.card:hover { transform: translateY(-6px); box-shadow: var(--sh-2); }
.card__media { aspect-ratio:16/11; overflow:hidden; position:relative; }
.card__media img, .card__media svg { width:100%; height:100%; object-fit:cover; transition: transform 700ms var(--ease); }
.card:hover .card__media img, .card:hover .card__media svg { transform: scale(1.06); }
.card__pin { position:absolute; top:14px; left:14px; background: rgba(7,26,47,.78); color:#fff; font-family: var(--ff-display); font-size:.72rem; font-weight:600; padding:.35em .8em; border-radius: var(--r-pill); backdrop-filter: blur(4px); }
.card__body { padding:22px 24px 26px; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.card__body h3 { font-size:1.3rem; }
.card__foot { display:flex; gap:1rem; align-items:center; margin-top:auto; padding-top:.7rem; font-size:.82rem; color: var(--muted); flex-wrap:wrap; }
.card__foot svg { width:1.05em; color: var(--ocean); }

/* overlay tile */
.tile { position:relative; border-radius: var(--r-lg); overflow:hidden; min-height:280px; display:flex; align-items:flex-end; color:#fff; isolation:isolate; }
.tile img, .tile svg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition: transform var(--t); }
.tile::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(180deg, rgba(7,26,47,0) 30%, rgba(7,26,47,.86)); }
.tile:hover img, .tile:hover svg { transform: scale(1.07); }
.tile__label { padding:24px; }
.tile__label small { font-family: var(--ff-display); text-transform:uppercase; letter-spacing:.14em; font-size:.68rem; opacity:.85; }
.tile__label h3 { color:#fff; margin-top:.2rem; }

/* editorial entry */
.entry { display:grid; gap:.55rem; }
.entry__media { border-radius: var(--r-md); overflow:hidden; aspect-ratio:16/10; box-shadow: var(--sh-1); }
.entry__media img, .entry__media svg { width:100%; height:100%; object-fit:cover; transition: transform var(--t); }
.entry:hover .entry__media img, .entry:hover .entry__media svg { transform: scale(1.05); }
.entry__cat { font-family: var(--ff-display); font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; color: var(--ocean); font-weight:600; }
.entry h3 { font-size:1.3rem; transition: color var(--t-fast); }
.entry:hover h3 { color: var(--ocean); }
.entry p { font-size:.94rem; }
.entry__by { font-size:.8rem; color: var(--muted); }

/* feature panel & floating card */
.panel { background:#fff; border-radius: var(--r-lg); padding: clamp(24px,3.4vw,42px); box-shadow: var(--sh-1); border:1px solid var(--line); }
.panel--lift { box-shadow: var(--sh-2); }
.panel--ocean { background: var(--g-panel); color:#fff; border:0; }
.panel--ocean h3, .panel--ocean h4 { color:#fff; }
.panel--ocean p { color: rgba(255,255,255,.85); }
.panel--outline { background: rgba(10,132,255,.05); border:1px solid rgba(10,132,255,.25); box-shadow:none; }
.float-card { position:absolute; background:#fff; border-radius: var(--r-md); padding:16px 18px; box-shadow: var(--sh-2); }

/* ---------- stats ---------- */
.stat b { font-family: var(--ff-display); font-weight:800; font-size: clamp(2.2rem,4vw,3.4rem); color: var(--ocean); display:block; line-height:1; letter-spacing:-.03em; }
.on-dark .stat b { color: var(--cyan-soft); }
.stat span { font-size:.9rem; color: var(--muted); }
.on-dark .stat span { color: rgba(255,255,255,.72); }

/* ---------- icon feature ---------- */
.feature { display:flex; flex-direction:column; gap:.55rem; }
.feature__ic { width:56px; height:56px; border-radius:16px; display:grid; place-items:center; }
.feature__ic svg { width:27px; }
.ic-ocean { background: rgba(10,132,255,.14); color: var(--ocean); }
.ic-cyan { background: rgba(34,211,238,.18); color:#0a7d8c; }
.ic-navy { background: rgba(10,37,64,.1); color: var(--navy); }
.ic-sand { background: var(--sand); color:#7a6a45; }
.on-dark .feature__ic { background: rgba(255,255,255,.12); color:#fff; }

/* ---------- checklist ---------- */
.checklist { display:grid; gap:.8rem; }
.checklist li { display:flex; gap:.75rem; align-items:flex-start; color:#3a4655; }
.checklist li svg { width:23px; flex:none; color: var(--ocean); margin-top:.1em; }
.checklist--card li { background:#fff; border:1px solid var(--line); border-radius: var(--r-sm); padding:.9rem 1rem; box-shadow: var(--sh-1); }
.on-dark .checklist li { color: rgba(255,255,255,.84); }
.on-dark .checklist li svg { color: var(--cyan); }

/* ---------- timeline ---------- */
.timeline { position:relative; padding-left:38px; }
.timeline::before { content:""; position:absolute; left:11px; top:6px; bottom:6px; width:2px; background: var(--g-cyan); }
.timeline li { position:relative; padding-bottom:1.9rem; }
.timeline li::before { content:""; position:absolute; left:-38px; top:2px; width:24px; height:24px; border-radius:50%; background:#fff; border:5px solid var(--ocean); }
.timeline li:nth-child(even)::before { border-color: var(--cyan); }
.timeline small { font-family: var(--ff-display); text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; font-weight:600; color: var(--ocean); }
.timeline h4 { color: var(--navy); margin-top:.1rem; }

/* ---------- accordion ---------- */
.accordion { border-top:1px solid var(--line); }
.acc { border-bottom:1px solid var(--line); }
.acc__head { width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem; text-align:left; padding:1.25rem 0; font-family: var(--ff-display); font-weight:600; font-size:1.14rem; color: var(--navy); }
.acc__head .pm { width:32px; height:32px; flex:none; border-radius:50%; background: var(--light); display:grid; place-items:center; transition: background var(--t-fast); }
.acc__head .pm svg { width:16px; transition: transform var(--t-fast); color: var(--ocean); }
.acc.is-open .acc__head .pm { background: var(--ocean); }
.acc.is-open .acc__head .pm svg { transform: rotate(45deg); color:#fff; }
.acc__panel { max-height:0; overflow:hidden; transition: max-height var(--t); }
.acc__panel p { padding-bottom:1.25rem; }

/* expandable knowledge card */
.kcard { background:#fff; border:1px solid var(--line); border-radius: var(--r-md); padding:22px 24px; box-shadow: var(--sh-1); transition: box-shadow var(--t); }
.kcard.is-open { box-shadow: var(--sh-2); }
.kcard__head { display:flex; justify-content:space-between; align-items:center; gap:1rem; cursor:pointer; }
.kcard__head h4 { color: var(--navy); }
.kcard__more { max-height:0; overflow:hidden; transition: max-height var(--t); }
.kcard__more > div { padding-top:1rem; }

/* ---------- tabs ---------- */
.tabs__list { display:inline-flex; flex-wrap:wrap; gap:.4rem; padding:.4rem; background: var(--light); border-radius: var(--r-pill); }
.tabs__btn { padding:.6em 1.3em; border-radius: var(--r-pill); font-family: var(--ff-display); font-weight:600; font-size:.9rem; color: var(--navy); transition: background var(--t-fast), color var(--t-fast); }
.tabs__btn[aria-selected="true"] { background: var(--g-panel); color:#fff; }
.tabs__panel { display:none; margin-top:1.8rem; }
.tabs__panel.is-active { display:block; animation: fade-up .5s var(--ease); }

/* ---------- filter bar ---------- */
.filterbar { display:flex; flex-wrap:wrap; gap:.5rem; }
.filterbar button { padding:.55em 1.2em; border-radius: var(--r-pill); font-family: var(--ff-display); font-weight:600; font-size:.86rem; background:#fff; border:1px solid var(--line); color: var(--navy); transition: all var(--t-fast); }
.filterbar button[aria-pressed="true"] { background: var(--ocean); color:#fff; border-color: var(--ocean); }
.filterbar button:hover { border-color: var(--ocean); }
.filter-empty { display:none; padding:2rem; text-align:center; color: var(--muted); }

/* ---------- comparison ---------- */
.compare { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.compare__col { background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px,3vw,34px); }
.compare__col--pick { border-color: rgba(10,132,255,.5); background: rgba(10,132,255,.05); position:relative; }
@media (max-width:660px){ .compare { grid-template-columns:1fr; } }

/* ---------- data table ---------- */
.tbl { width:100%; border-collapse:collapse; background:#fff; border-radius: var(--r-md); overflow:hidden; box-shadow: var(--sh-1); }
.tbl th, .tbl td { padding:.95rem 1.1rem; text-align:left; font-size:.92rem; border-bottom:1px solid var(--line); }
.tbl thead th { background: var(--navy); color:#fff; font-family: var(--ff-display); font-weight:600; }
.tbl tbody tr:nth-child(even) { background: var(--light); }
.tbl tr:last-child td { border-bottom:0; }
.tbl td b { color: var(--navy); }
.tbl-scroll { overflow-x:auto; }

/* ---------- note / callout ---------- */
.note { border-radius: var(--r-md); padding: clamp(20px,3vw,32px); background: var(--light); border-left:5px solid var(--ocean); }
.note--cyan { background: rgba(34,211,238,.1); border-left-color: var(--cyan); }
.note--navy { background: rgba(10,37,64,.06); border-left-color: var(--navy); }
.note--warn { background: rgba(255,176,32,.12); border-left-color: #E8A317; }
.note h4 { display:flex; align-items:center; gap:.5em; color: var(--navy); }
.note__ic { width:26px; height:26px; flex:none; color: var(--ocean); }
.pull { font-family: var(--ff-display); font-weight:600; font-size: clamp(1.5rem,3vw,2.3rem); line-height:1.3; color: var(--navy); letter-spacing:-.02em; }
.pull span { color: var(--ocean); }
.on-dark .pull { color:#fff; } .on-dark .pull span { color: var(--cyan-soft); }

/* ---------- meter ---------- */
.meter { display:grid; gap:.4rem; }
.meter__top { display:flex; justify-content:space-between; font-size:.86rem; }
.meter__bar { height:9px; border-radius: var(--r-pill); background: var(--light); overflow:hidden; }
.meter__fill { height:100%; border-radius: var(--r-pill); background: var(--g-cyan); width:0; transition: width 1s var(--ease); }

/* ---------- horizontal scroll rail ---------- */
.hrail { display:grid; grid-auto-flow:column; grid-auto-columns: minmax(280px, 30%); gap: clamp(16px,2vw,26px); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:1rem; scrollbar-width:thin; }
.hrail > * { scroll-snap-align:start; }
.hrail::-webkit-scrollbar { height:8px; }
.hrail::-webkit-scrollbar-thumb { background: var(--cool); border-radius: var(--r-pill); }
@media (max-width:620px){ .hrail { grid-auto-columns: minmax(78%, 80%); } }

/* ---------- forms ---------- */
.field { display:flex; flex-direction:column; gap:.45rem; }
.field label { font-family: var(--ff-display); font-size:.85rem; font-weight:600; color: var(--ink); }
.field input, .field textarea, .field select { padding:.9em 1.1em; border-radius: var(--r-sm); border:1.5px solid var(--line); background:#fff; font:inherit; color: var(--ink); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--ocean); box-shadow: var(--ring); outline:none; }
.field textarea { min-height:160px; resize:vertical; }
.form-card { background:#fff; border-radius: var(--r-lg); padding: clamp(24px,4vw,46px); box-shadow: var(--sh-1); border:1px solid var(--line); }
.form-note { font-size:.84rem; color: var(--muted); }
.form-msg { display:none; margin-top:1rem; padding:.9em 1.1em; border-radius: var(--r-sm); font-size:.9rem; }
.form-msg.show { display:block; }
.form-msg--ok { background: rgba(34,211,238,.16); color:#0a6373; }
.form-msg--err { background: rgba(255,99,71,.14); color:#b23a2a; }

/* ---------- prose (legal) ---------- */
.prose { max-width: 74ch; }
.prose h2 { font-size:1.7rem; margin-top:2.4rem; }
.prose h3 { font-size:1.25rem; margin-top:1.6rem; }
.prose p, .prose li { color:#3a4655; }
.prose ul { margin:1rem 0; display:grid; gap:.5rem; }
.prose ul li { position:relative; padding-left:1.4rem; }
.prose ul li::before { content:""; position:absolute; left:0; top:.7em; width:7px; height:7px; border-radius:2px; background: var(--ocean); }
.prose a { color: var(--ocean); text-decoration:underline; text-underline-offset:3px; }
.prose hr { border:0; height:1px; background: var(--line); margin:2.2rem 0; }
.toc { background: var(--light); border-radius: var(--r-md); padding:22px 26px; position:sticky; top:96px; }
.toc h4 { margin-bottom:.6rem; }
.toc a { display:block; padding:.3rem 0; font-size:.92rem; color: var(--navy); }
.toc a:hover { color: var(--ocean); }

/* ---------- cookie UI ---------- */
.cookie-bar { position:fixed; left:50%; bottom:22px; transform: translateX(-50%) translateY(170%); width:min(94vw,780px); background:#fff; border:1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-2); padding:22px 24px; z-index:240; transition: transform var(--t); }
.cookie-bar.show { transform: translateX(-50%) translateY(0); }
.cookie-bar__row { display:flex; gap:1.2rem; align-items:center; flex-wrap:wrap; }
.cookie-bar p { flex:1; min-width:220px; font-size:.9rem; }
.cookie-bar .actions { display:flex; gap:.6rem; flex-wrap:wrap; }
.cookie-row { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.1rem 0; border-bottom:1px solid var(--line); }
.switch { width:50px; height:28px; border-radius: var(--r-pill); background: var(--cool); position:relative; flex:none; transition: background var(--t-fast); }
.switch::after { content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; transition: transform var(--t-fast); }
.switch[aria-checked="true"] { background: var(--ocean); }
.switch[aria-checked="true"]::after { transform: translateX(22px); }
.switch[aria-disabled="true"] { opacity:.55; cursor:not-allowed; }