/* ==========================================================================
   Employee Health Hubs  (loaded only on hub, HR and hub-admin pages)
   --hub / --hub-ink are set per company from its accent colour.
   ========================================================================== */
.hub-index{padding-block:3rem}
.hub-index h1{max-width:20ch}
.hub-index__h{margin-top:2rem}
.hub-companies{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem;margin:1rem 0 2rem}
.hub-company{display:flex;flex-direction:column;gap:.7rem;height:100%;padding:1.2rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:var(--ink);box-shadow:var(--shadow-sm)}
.hub-company:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.hub-company__logo{display:flex;align-items:center;justify-content:center;height:84px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:.6rem}
.hub-company__logo img{max-height:100%;max-width:100%;object-fit:contain}
.hub-company__mono{font:700 2rem var(--font-display);color:var(--accent)}
.hub-company__name{font-weight:700;font-size:1.05rem}
.hub-company__go{color:var(--accent-ink);font-size:.88rem;font-weight:650;margin-top:auto}
.hub-index__how ol{padding-inline-start:1.2rem;margin:.6rem 0}

.hub-shell{--hub:var(--accent);--hub-ink:#fff;background:var(--bg)}
.hub-notice{padding:.6rem 1rem;text-align:center;font-size:.85rem;font-weight:650}
.hub-notice--draft{background:var(--warn-soft);color:var(--warn)}
.hub-subnav{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
.hub-subnav__inner{display:flex;align-items:center;gap:.3rem;min-height:54px;overflow-x:auto;scrollbar-width:thin}
.hub-subnav a{flex:none;padding:.5rem .8rem;border-radius:8px;color:var(--ink);text-decoration:none;font-size:.88rem;font-weight:650;white-space:nowrap}
.hub-subnav a:hover{background:var(--surface-2)}
.hub-subnav a.is-active{background:var(--hub);color:var(--hub-ink)}
.hub-subnav .hub-subnav__cta{margin-inline-start:auto;background:var(--accent-2-ink);color:#fff}

/* The logo always sits on a plate, so a dark logo never disappears into a coloured hero. */
.hub-logo{display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:12px;padding:.7rem 1.1rem;box-shadow:var(--shadow-sm);max-width:260px;margin-bottom:1.2rem}
.hub-logo img{display:block;max-height:64px;max-width:100%;width:auto;height:auto;object-fit:contain}
.hub-logo--text{font:700 1.3rem var(--font-display);color:#19231f}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hub-logo--themed{background:var(--surface-2)}}
:root[data-theme="dark"] .hub-logo--themed{background:var(--surface-2)}

.hub-hero{padding:3.2rem 0;background:linear-gradient(135deg,var(--hub) 0%,color-mix(in srgb,var(--hub) 70%,#000) 100%);color:var(--hub-ink)}
.hub-hero--banner{background:linear-gradient(135deg,color-mix(in srgb,var(--hub) 88%,transparent),color-mix(in srgb,var(--hub) 60%,transparent)),var(--hub-banner) center/cover}
.hub-hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:2.5rem;align-items:center}
.hub-hero h1{color:inherit;max-width:16ch;font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.08}
.hub-hero .eyebrow{color:inherit;opacity:.85}
.hub-hero .lead{color:inherit;opacity:.95;max-width:34rem}
.hub-hero .btn-row{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.4rem}
.btn--hub{background:#fff;color:#19231f;border-color:#fff}
.btn--hub:hover{background:var(--surface-2);color:#19231f}
.btn--hub-ghost{background:transparent;color:inherit;border-color:currentColor}
.btn--hub-ghost:hover{background:rgba(255,255,255,.14);color:inherit}
.hub-quick{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}
.hub-quick .card{display:flex;flex-direction:column;gap:.3rem;min-height:140px;color:var(--ink);text-decoration:none}
.hub-quick .card h3{margin:0}
.hub-quick .card p{margin:0;font-size:.88rem}
.hub-quick .card b{margin-top:auto;color:var(--accent-ink);font-size:.88rem}
.hub-pagehead{padding:2.4rem 0 1.6rem;background:color-mix(in srgb,var(--hub) 9%,var(--bg));border-bottom:1px solid var(--line)}
.hub-pagehead .eyebrow{color:var(--accent-ink)}
.hub-pagehead h1{margin:.2rem 0 .4rem}
.hub-contact{margin-top:1.6rem}
.hub-link{display:block;color:inherit;text-decoration:none}
.hub-link:hover{border-color:var(--hub)}

.plan-picker{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.4rem}
.plan-picker button{padding:.5rem 1.1rem;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);color:var(--ink);font:inherit;font-weight:650;cursor:pointer}
.plan-picker button.is-active{background:var(--hub);border-color:var(--hub);color:var(--hub-ink)}
.benefit-levels{margin-top:1rem}
.benefit-grid{display:grid;gap:.7rem}
.benefit-grid[hidden]{display:none}
.benefit-level-h{font-size:1.15rem;margin:.2rem 0}
.benefit-row{display:grid;grid-template-columns:1.4fr repeat(3,minmax(90px,.8fr)) auto;gap:.9rem;align-items:center;padding:1rem 1.1rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.benefit-row small{display:block;color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.04em}
.benefit-row strong{font-size:.98rem}
@media (max-width:860px){
  .hub-hero__grid{grid-template-columns:1fr}
  .benefit-row{grid-template-columns:1fr 1fr}
  .benefit-row__action{grid-column:1/-1;justify-self:stretch;text-align:center}
}
@media (max-width:480px){.hub-quick{grid-template-columns:1fr}}

/* HR and admin editor */
.hub-form fieldset{border:0;padding:1.2rem}
.hub-form legend{font-weight:700;font-size:1.05rem;padding:0 .3rem;margin-bottom:.4rem}
.hub-form__thumb{max-height:48px;max-width:160px;vertical-align:middle;background:#fff;border:1px solid var(--line);border-radius:6px;padding:3px}
.hub-form__row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:flex-end;padding:.7rem 0;border-bottom:1px dashed var(--line)}
.hub-form__cell{display:flex;flex-direction:column;gap:.2rem;min-width:7rem;font-size:.8rem;color:var(--muted)}
.hub-form__cell input,.hub-form__cell textarea{width:100%}
.hub-form__actions{display:flex;gap:.7rem;flex-wrap:wrap;position:sticky;bottom:0;padding:.8rem 0;background:linear-gradient(transparent,var(--bg) 35%)}
[data-repeat]{display:grid;gap:.6rem}