/* HN Group Sites, on top of the unchanged HN Group website stylesheet (site.css) and the shared motion kit. */
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.brand { display: inline-flex; align-items: center; gap: .85rem; text-decoration: none; }
.brand-label { padding-left: .85rem; border-left: 1px solid var(--border); font-weight: 800; color: var(--text); font-size: 1.05rem; }
.header-inner { gap: 1.2rem; }
.sites-nav { display: flex; gap: 1.4rem; margin-left: auto; }
.sites-nav a { color: var(--muted); font-weight: 700; text-decoration: none; }
.sites-nav a:hover { color: var(--accent); }
.status-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .9rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-weight: 700; font-size: .88rem; text-decoration: none; white-space: nowrap; transition: border-color .2s, transform .2s; }
.status-pill:hover { border-color: var(--accent); transform: translateY(-1px); }

/* Status dots: green working, amber slow or maintenance, red problems, grey unknown. */
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border); flex: none; transition: background .3s; }
[data-status="operational"] > .dot, [data-status="operational"] .card-host .dot { background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent); }
[data-status="degraded"] > .dot, [data-status="degraded"] .card-host .dot, [data-status="maintenance"] > .dot, [data-status="maintenance"] .card-host .dot { background: #E0A800; box-shadow: 0 0 0 3px rgba(224, 168, 0, .22); }
[data-status="outage"] > .dot, [data-status="outage"] .card-host .dot { background: var(--raspberry); box-shadow: 0 0 0 3px color-mix(in srgb, var(--raspberry) 25%, transparent); animation: sites-pulse 1.6s ease-in-out infinite; }
@keyframes sites-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--raspberry) 8%, transparent); } }

/* Hero with the finder */
.sites-hero { padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.sites-hero .head-steps { width: min(280px, 46%); margin-bottom: 1.8rem; }
.sites-hero h1 { max-width: 18ch; }
.sites-hero h1 span { color: var(--accent); }
.sites-hero .lead { max-width: 58ch; }
.finder { position: relative; max-width: 720px; margin-top: 2rem; }
.finder svg { position: absolute; left: 1.2rem; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.finder input { width: 100%; height: 64px; padding: 0 3.6rem 0 3.4rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: 1.08rem; box-shadow: var(--shadow); outline: none; transition: border-color .2s, box-shadow .2s; }
.finder input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow); }
.finder kbd { position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%); min-width: 28px; padding: .15rem .45rem; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); font-family: inherit; font-weight: 700; font-size: .85rem; line-height: 1.4; text-align: center; background: var(--tint); }
.popular { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1.1rem; }
.chip { padding: .35rem .85rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: .9rem; text-decoration: none; transition: transform .15s, background .15s; }
.chip:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--accent) 18%, var(--accent-soft)); }

/* Directory */
.directory { padding-bottom: clamp(3rem, 7vw, 5rem); }
.toolbar { position: sticky; top: var(--header-h); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; padding: .9rem 0; margin-bottom: .6rem; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.tabs { display: flex; flex-wrap: wrap; gap: .45rem; }
.tabs button { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem 1rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer; transition: border-color .15s, background .15s; }
.tabs button span { min-width: 1.6em; padding: 0 .4em; border-radius: 999px; background: var(--tint); color: var(--muted); font-size: .8rem; text-align: center; }
.tabs button:hover { border-color: var(--accent); }
.tabs button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.tabs button[aria-pressed="true"] span { background: color-mix(in srgb, var(--on-accent) 22%, transparent); color: inherit; }
.result-count { margin: 0; color: var(--muted); font-weight: 600; }
.group { padding-top: 2.2rem; scroll-margin-top: calc(var(--header-h) + 70px); }
.group-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.group-head h2 { margin: 0 0 .25rem; }
.group-head p { margin: 0; }
.group-count { flex: none; min-width: 2.2rem; padding: .2rem .6rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 800; text-align: center; }
.site-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 1rem; }
.site-grid.companies { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }

/* A site: the whole card opens the site; the star pins it. */
.site-card { position: relative; display: flex; flex-direction: column; padding: 1.3rem 1.3rem 1.1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); transition: transform .2s, border-color .2s, box-shadow .2s; }
.site-card:hover, .site-card:focus-within { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: 0 14px 34px rgba(28, 33, 53, .12); }
.site-card.wide { grid-column: span 2; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; margin-bottom: 1rem; }
.card-mark.icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); }
.card-mark.icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card-mark.logo { display: flex; align-items: center; height: 48px; }
.card-mark.logo img { height: 44px; width: auto; max-width: 200px; }
.site-card.wide .card-mark.logo img { height: 48px; }
.pin { position: relative; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid transparent; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; transition: color .15s, background .15s, transform .15s; }
.pin svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.pin:hover { background: var(--tint); color: var(--text); }
.pin[aria-pressed="true"] { color: #E0A800; }
.pin[aria-pressed="true"] svg { fill: currentColor; }
.pin:active { transform: scale(.9); }
.card-label { margin: 0 0 .25rem; font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.site-card h3 { margin: 0 0 .4rem; font-size: 1.2rem; }
.card-link { color: var(--text); text-decoration: none; }
.card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card-link:focus-visible { outline: none; }
.site-card:has(.card-link:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.card-desc { margin: 0 0 1rem; color: var(--muted); line-height: 1.55; flex: 1; }
.card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding-top: .85rem; border-top: 1px solid var(--border); font-size: .86rem; }
.card-host { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; color: var(--muted); font-weight: 600; }
.host-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.access { flex: none; padding: .15rem .6rem; border-radius: 999px; font-size: .76rem; font-weight: 800; }
.access.open { background: color-mix(in srgb, var(--green) 15%, transparent); color: color-mix(in srgb, var(--green) 70%, var(--text)); }
.access.staff { background: var(--accent-soft); color: var(--accent); }
.access.restricted { background: color-mix(in srgb, var(--raspberry) 13%, transparent); color: color-mix(in srgb, var(--raspberry) 80%, var(--text)); }
.card-head .state { flex: none; align-self: center; margin-left: auto; margin-right: -.4rem; padding: .25rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 800; }
.state[data-state="outage"] { background: var(--raspberry); color: #fff; }
.state[data-state="maintenance"], .state[data-state="degraded"] { background: rgba(224, 168, 0, .18); color: color-mix(in srgb, #A57C00 80%, var(--text)); }
.site-card[data-status="outage"] { border-color: color-mix(in srgb, var(--raspberry) 45%, var(--border)); }
.site-card[data-status="outage"] .card-mark, .site-card[data-status="outage"] .card-desc { opacity: .6; }
.pinned { padding-top: 1.4rem; }
.empty { padding: 3rem 1rem; text-align: center; }
.empty h2 { margin-bottom: .4rem; }
.sites-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem; }
.sites-footer .footer-links { display: flex; flex-wrap: wrap; gap: 1.2rem; }

@media (max-width: 860px) { .sites-nav { display: none; } .status-pill { margin-left: auto; } }
@media (max-width: 640px) {
  .site-card.wide { grid-column: auto; }
  .finder input { height: 56px; font-size: 1rem; padding-right: 1rem; }
  .finder kbd { display: none; }
  .status-pill #status-pill-text { max-width: 9.5rem; overflow: hidden; text-overflow: ellipsis; }
  .group-head { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .site-card, .pin, .chip, .status-pill, .dot { transition: none; } [data-status="outage"] .dot { animation: none; } .site-card:hover { transform: none; } }
/* Company logos already spell out the name, so their heading is for screen readers only (no duplicated names). */
.site-card.has-logo h3 { margin: 0; font-size: 0; line-height: 0; }
.site-card.has-logo h3 .name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.site-card.has-logo .card-mark.logo { height: 56px; }
.site-card.has-logo .card-mark.logo img { height: 52px; }
/* Narrow screens: the status pill is just its coloured dot (its words stay for screen readers). */
@media (max-width: 480px) {
  .status-pill { padding: .55rem; }
  .status-pill #status-pill-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .status-pill .dot { width: 11px; height: 11px; }
}
/* Phones: the filters stay on one line and scroll sideways, so the sticky bar stays slim. */
@media (max-width: 640px) {
  .toolbar { flex-wrap: nowrap; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -1rem; padding: 0 1rem; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { flex: none; }
  .result-count { display: none; }
}