/* Company directory prototype. Plain CSS, no build step. */

:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #eef1f5;
  --text: #17202b;
  --muted: #5b6878;
  --border: #d9dee6;
  --accent: #0b5f86;
  --accent-text: #ffffff;
  --accent-soft: #e2f0f7;
  --focus: #1a73e8;
  --warning-bg: #fff4d6;
  --warning-border: #e3b341;
  --warning-text: #5c4300;
  --info-bg: #e7f1fb;
  --info-border: #8fb8de;
  --info-text: #17405f;
  --ok: #1e7b45;
  --bad: #a3322b;
  --radius: 10px;
  --shadow: 0 1px 2px rgb(16 24 40 / 6%), 0 1px 3px rgb(16 24 40 / 8%);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f141a;
    --surface: #171e26;
    --surface-2: #1f2832;
    --text: #e6ebf1;
    --muted: #9aa7b6;
    --border: #2c3744;
    --accent: #5fb4dc;
    --accent-text: #08141c;
    --accent-soft: #15303f;
    --focus: #8ab4f8;
    --warning-bg: #3a2f10;
    --warning-border: #8a6d1c;
    --warning-text: #f3dd9a;
    --info-bg: #142636;
    --info-border: #2e5578;
    --info-text: #bcd8f0;
    --ok: #6fcf97;
    --bad: #f28b82;
    --shadow: none;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0f141a; --surface: #171e26; --surface-2: #1f2832; --text: #e6ebf1; --muted: #9aa7b6;
  --border: #2c3744; --accent: #5fb4dc; --accent-text: #08141c; --accent-soft: #15303f; --focus: #8ab4f8;
  --warning-bg: #3a2f10; --warning-border: #8a6d1c; --warning-text: #f3dd9a;
  --info-bg: #142636; --info-border: #2e5578; --info-text: #bcd8f0; --ok: #6fcf97; --bad: #f28b82;
  --shadow: none; color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 var(--font);
  -webkit-text-size-adjust: 100%;
}

a { color: var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
h1:focus { outline: none; }

.skip-link { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 10; }
.skip-link:focus { left: 16px; }

.muted { color: var(--muted); }

/* Header and footer ---------------------------------------------------- */

.site-header { background: var(--surface); border-bottom: 1px solid var(--border); }
.site-header__inner, .page, .site-footer {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}
.site-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-top: 12px; padding-bottom: 12px; }
.site-title { margin: 0; font-weight: 700; font-size: 1.05rem; }
.site-footer { color: var(--muted); font-size: .85rem; padding-top: 24px; padding-bottom: 32px; }

/* Banners -------------------------------------------------------------- */

.banner { border: 1px solid; border-radius: var(--radius); padding: 10px 14px; margin: 0 0 12px; font-size: .92rem; }
.banner--warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); }
.banner--info { background: var(--info-bg); border-color: var(--info-border); color: var(--info-text); }

/* Layout --------------------------------------------------------------- */

.page { padding-top: 16px; padding-bottom: 16px; min-height: 60vh; }
.page:focus { outline: none; }
.page-title { font-size: 1.6rem; margin: 4px 0 16px; }
.layout { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px) {
  .layout { grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: start; }
  .sidebar { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; }
}

/* Filters -------------------------------------------------------------- */

.filters-toggle { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.filters-toggle > summary { cursor: pointer; padding: 12px 14px; font-weight: 600; list-style: none; }
.filters-toggle > summary::-webkit-details-marker { display: none; }
.filters-toggle > summary::after { content: "▾"; float: right; color: var(--muted); }
.filters-toggle[open] > summary::after { content: "▴"; }
@media (min-width: 900px) {
  .filters-toggle > summary { pointer-events: none; }
  .filters-toggle > summary::after, .filters-toggle[open] > summary::after { content: none; }
}
.filters { padding: 0 14px 14px; }
.filter-group { border: 0; margin: 0 0 14px; padding: 0; min-width: 0; }
.filter-group legend, .filter-label { font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 0; margin-bottom: 6px; display: block; }
.search { width: 100%; font: inherit; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }
.option-list { list-style: none; margin: 0; padding: 0; }
.option { display: flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; font-size: .94rem; }
.option input { margin: 0; width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
.option__label { flex: 1; min-width: 0; }
.option__count { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; background: var(--surface-2); border-radius: 999px; padding: 0 7px; }
.option--empty .option__label { color: var(--muted); }
.option--toggle { font-weight: 500; }
.filter-hint { font-size: .8rem; color: var(--muted); margin: 0 0 10px; }

.button { font: inherit; font-weight: 600; border-radius: 8px; padding: 8px 14px; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-text); cursor: pointer; }
.button--ghost { background: transparent; color: var(--accent); width: 100%; }

/* Results -------------------------------------------------------------- */

.result-count { margin: 0 0 12px; color: var(--muted); font-size: .92rem; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; display: flex; flex-direction: column; position: relative; transition: border-color .15s; }
.card:hover, .card:focus-within { border-color: var(--accent); }
.card article { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.card__head { display: flex; gap: 12px; align-items: center; }
.card__title { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.card__link { color: var(--text); text-decoration: none; }
.card__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.card__link:focus-visible { outline: none; }
.card:has(.card__link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.card__meta { margin: 2px 0 0; color: var(--muted); font-size: .88rem; }
.card__desc { margin: 0; font-size: .94rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card__foot { margin: auto 0 0; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .84rem; color: var(--muted); }

.empty, .state { background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); padding: 24px; text-align: center; }
.state--error { text-align: left; border-style: solid; border-color: var(--bad); }
.state h1 { font-size: 1.3rem; margin-top: 0; }

/* Logos, chips, badges ------------------------------------------------- */

.logo { flex: none; border-radius: 10px; object-fit: contain; background: #fff; border: 1px solid var(--border); }
.logo--md { width: 48px; height: 48px; }
.logo--lg { width: 80px; height: 80px; }
.logo--monogram { display: grid; place-items: center; font-weight: 700; color: #fff; border: 0; background: hsl(var(--hue, 200) 45% 38%); letter-spacing: .02em; }
.logo--md.logo--monogram { font-size: 1rem; }
.logo--lg.logo--monogram { font-size: 1.6rem; }

.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: var(--accent-soft); color: var(--text); border-radius: 999px; padding: 2px 10px; font-size: .8rem; }
.chip--more { background: var(--surface-2); color: var(--muted); }

.badge { display: inline-block; border-radius: 999px; padding: 1px 9px; font-size: .78rem; font-weight: 600; border: 1px solid var(--border); white-space: nowrap; }
.badge--status.badge--active { color: var(--ok); border-color: currentColor; }
.badge--status.badge--defunct, .badge--status.badge--site-closed { color: var(--bad); border-color: currentColor; }
/* Provisional profiles: restrained and neutral, never a warning colour. */
.badge--provisional { color: var(--muted); background: var(--surface-2); font-weight: 600; }
.card__provisional { font-style: italic; }


/* Profile -------------------------------------------------------------- */

.back-link { display: inline-block; margin-bottom: 12px; font-weight: 600; text-decoration: none; }
.profile { max-width: 860px; }
.profile__head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.profile__title { margin: 0; font-size: 1.8rem; line-height: 1.2; overflow-wrap: anywhere; }
.profile__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0; color: var(--muted); }
.profile__website { margin: 6px 0 0; overflow-wrap: anywhere; }
.profile__note { margin: 6px 0 0; color: var(--muted); font-size: .88rem; max-width: 60ch; }
.facts__note { margin: 10px 0 0; color: var(--muted); font-size: .85rem; }
.profile__section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 14px; }
.profile__section h2 { font-size: 1.05rem; margin: 0 0 10px; }
.profile__section p { margin: 0 0 8px; }
.profile__section .chips { margin-bottom: 10px; }
.profile__foot { color: var(--muted); font-size: .85rem; }
.profile__foot p { margin: 4px 0; }

.facts { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 8px 16px; margin: 0; }
.facts dt { font-weight: 600; color: var(--muted); font-size: .9rem; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .facts { grid-template-columns: 1fr; gap: 2px; }
  .facts dd { margin-bottom: 10px; }
  .profile__head { flex-direction: column; }
  .profile__title { font-size: 1.5rem; }
}

.plain-list { margin: 0; padding-left: 20px; }
.plain-list li { margin-bottom: 4px; }
.services { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.services li { display: grid; gap: 2px; padding: 10px 12px; background: var(--surface-2); border-radius: 8px; }
.services__name { font-weight: 600; }
.services__access, .services__scope { font-size: .86rem; color: var(--muted); }
.services__access--not-established, .services__access--company-level-statement { color: var(--warning-text); }
.usp { margin: 12px 0 0; border-left: 3px solid var(--accent); padding: 4px 0 4px 12px; }
.usp footer { font-size: .8rem; color: var(--muted); }

/* Reviewer text keeps its line breaks. */
.profile__description, .services__text { white-space: pre-line; }
.services__text { margin: 8px 0 0; }

/* Shown only when the live data could not be loaded and the bundled last publication is displayed. */
.data-notice { margin: 0; padding: 10px 16px; text-align: center; font-size: 0.9rem; background: #fdf3e1; color: #6b4708; border-bottom: 1px solid #f0d9a8; }