/*
 * Growth Engine components (Klanten, Diensten) in the Strix Design System.
 * The tokens are global (tokens.css), as are Poppins and the page background;
 * the --g-* names stay as short aliases for the components below.
 */
.growth {
    --g-black: var(--strix-black);
    --g-white: var(--strix-white);
    --g-yellow: var(--strix-yellow);
    --g-grey-50: var(--strix-grey-50);
    --g-grey-100: var(--strix-grey-100);
    --g-grey-300: var(--strix-grey-300);
    --g-grey-500: var(--strix-grey-500);
    --g-grey-700: var(--strix-grey-700);
    --g-radius-sm: var(--radius-sm);
    --g-radius-md: var(--radius-lg);
    --g-border: 2px solid var(--strix-black);

    color: var(--g-black);
}

.growth a { color: var(--g-black); }
.growth a:hover { color: var(--g-grey-700); }

/* ── Page header ─────────────────────────────────────────────────────────── */
.g-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; margin-bottom: 1.75rem; flex-wrap: wrap; }
.g-eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--g-grey-500); margin: 0 0 0.35rem; }
.g-title { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin: 0; }
.g-subtitle { max-width: 760px; color: var(--g-grey-700); margin: 0.6rem 0 0; line-height: 1.55; }
.g-back { display: inline-block; font-size: 0.85rem; margin-bottom: 0.5rem; text-decoration: none; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.g-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.6rem 1.1rem; border: var(--g-border); border-radius: 999px;
         background: var(--g-white); font: inherit; font-weight: 600; font-size: 0.875rem; cursor: pointer; text-decoration: none; color: var(--g-black); }
.g-btn:hover { background: var(--g-grey-50); color: var(--g-black); }
.g-btn--primary { background: var(--g-yellow); }
.g-btn--primary:hover { background: #FFD000; }
.growth .g-btn--dark { background: var(--g-black); color: var(--g-white); }
.growth .g-btn--dark:hover { background: var(--g-grey-700); color: var(--g-white); }
.g-btn--sm { padding: 0.3rem 0.7rem; font-size: 0.8rem; border-width: 1.5px; }
.g-btn svg { width: 1em; height: 1em; }

/* ── Filter pills ────────────────────────────────────────────────────────── */
.g-filters { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 2rem; }
.g-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.g-pills__label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--g-grey-500); margin-right: 0.4rem; min-width: 4.5rem; }
.g-pill { padding: 0.3rem 0.8rem; border: 1.5px solid var(--g-grey-300); border-radius: 999px; font-size: 0.8rem; text-decoration: none; background: var(--g-white); }
.g-pill:hover { border-color: var(--g-black); }
.g-pill--active { background: var(--g-black); color: var(--g-white) !important; border-color: var(--g-black); }
.g-pill__count { opacity: 0.6; margin-left: 0.25rem; }

/* ── Block sections and service cards ───────────────────────────────────── */
.g-block { margin-bottom: 2.5rem; }
.g-block__head { display: flex; align-items: baseline; gap: 0.75rem; border-bottom: var(--g-border); padding-bottom: 0.5rem; margin-bottom: 1rem; }
.g-block__num { font-weight: 800; font-size: 1.1rem; background: var(--g-yellow); border: var(--g-border); border-radius: var(--g-radius-sm); padding: 0 0.5rem; }
.g-block__name { font-size: 1.15rem; font-weight: 700; margin: 0; }
.g-block__add { margin-left: auto; }

.g-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }

.g-card { display: flex; flex-direction: column; gap: 0.6rem; background: var(--g-white); border: 1.5px solid var(--g-grey-100); border-radius: var(--g-radius-md);
          padding: 1.15rem 1.25rem; text-decoration: none; transition: border-color 0.15s, transform 0.15s; }
.g-card:hover { border-color: var(--g-black); transform: translateY(-1px); }
.g-card--archived { opacity: 0.55; }
.g-card__top { display: flex; align-items: center; gap: 0.5rem; }
.g-code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.75rem; font-weight: 600; border: 1.5px solid var(--g-black); border-radius: 6px; padding: 0.05rem 0.4rem; }
.g-card__name { font-weight: 700; font-size: 1rem; line-height: 1.3; margin: 0; }
.g-card__pitch { color: var(--g-grey-700); font-size: 0.85rem; line-height: 1.5; margin: 0;
                 display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.g-card__meta { display: flex; justify-content: space-between; align-items: flex-end; gap: 0.75rem; margin-top: auto; padding-top: 0.5rem; border-top: 1px solid var(--g-grey-100); }
.g-card__internal { font-size: 0.75rem; color: var(--g-grey-500); }

.g-price { font-weight: 700; font-size: 0.95rem; white-space: nowrap; }
.g-lead { font-size: 0.8rem; color: var(--g-grey-700); }

.g-status { margin-left: auto; font-size: 0.7rem; font-weight: 600; padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--g-grey-50); color: var(--g-grey-700); white-space: nowrap; }
.g-status--exists { background: var(--g-black); color: var(--g-white); }
.g-status--partial { background: var(--g-yellow); color: var(--g-black); }
.g-status--pilot, .g-status--poc { background: var(--g-white); border: 1.5px solid var(--g-black); }

.g-empty { padding: 2rem; text-align: center; color: var(--g-grey-500); border: 1.5px dashed var(--g-grey-300); border-radius: var(--g-radius-md); }

/* ── Detail page ─────────────────────────────────────────────────────────── */
.g-detail-head { display: flex; gap: 2rem; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 1.5rem; }
.g-facts { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.g-fact { border: var(--g-border); border-radius: var(--g-radius-sm); padding: 0.55rem 0.9rem; background: var(--g-white); min-width: 9rem; }
.g-fact--accent { background: var(--g-yellow); }
.g-fact__label { display: block; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--g-grey-700); }
.g-fact__value { font-weight: 700; font-size: 1rem; }

.g-tabs { display: flex; gap: 0.25rem; border-bottom: var(--g-border); margin-bottom: 1.5rem; }
.g-tab { font: inherit; font-weight: 600; font-size: 0.9rem; padding: 0.6rem 1.1rem; border: none; background: none; cursor: pointer; border-radius: var(--g-radius-sm) var(--g-radius-sm) 0 0; color: var(--g-grey-700); }
.g-tab.is-active { background: var(--g-black); color: var(--g-white); }
.g-tab__hint { font-weight: 400; font-size: 0.75rem; opacity: 0.7; margin-left: 0.3rem; }

.g-columns { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (max-width: 960px) { .g-columns { grid-template-columns: 1fr; } }

.g-panel { background: var(--g-white); border: 1.5px solid var(--g-grey-100); border-radius: var(--g-radius-md); padding: 1.4rem 1.5rem; margin-bottom: 1.25rem; }
.g-panel--client { border: var(--g-border); }
.g-panel__title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--g-grey-500); margin: 0 0 0.75rem; }
.g-panel h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 0.5rem; }
.g-panel p { line-height: 1.6; margin: 0 0 0.75rem; }
.g-text { white-space: pre-line; line-height: 1.6; }
.g-lead-text { font-size: 1.05rem; color: var(--g-grey-700); }
.g-muted { color: var(--g-grey-500); }
.g-missing { color: var(--g-grey-500); font-style: italic; }

.g-dl { display: grid; grid-template-columns: 11rem 1fr; gap: 0.6rem 1rem; margin: 0; }
.g-dl dt { font-size: 0.8rem; font-weight: 600; color: var(--g-grey-700); }
.g-dl dd { margin: 0; }

.g-variants { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.6rem; }
.g-variant { border: 1.5px solid var(--g-black); border-radius: var(--g-radius-sm); padding: 0.6rem 0.75rem; }
.g-variant__label { font-weight: 700; }
.g-variant__desc { font-size: 0.75rem; color: var(--g-grey-700); }

.g-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.g-table th { text-align: left; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--g-grey-500); padding: 0.5rem 0.6rem; border-bottom: var(--g-border); }
.g-table td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--g-grey-100); vertical-align: top; }
.g-table tr:last-child td { border-bottom: none; }
.g-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.g-table tfoot td { font-weight: 700; border-top: var(--g-border); }
.g-phase-row td { background: var(--g-grey-50); font-weight: 700; font-size: 0.8rem; }

.g-warn { background: var(--g-yellow); border: var(--g-border); border-radius: var(--g-radius-sm); padding: 0.6rem 0.9rem; font-size: 0.85rem; margin-bottom: 1rem; }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.g-form fieldset { border: 1.5px solid var(--g-grey-100); border-radius: var(--g-radius-md); padding: 1.25rem 1.4rem 0.5rem; margin: 0 0 1.25rem; background: var(--g-white); }
.g-form legend { font-weight: 700; font-size: 1rem; padding: 0 0.4rem; }
.g-form__hint { font-size: 0.8rem; color: var(--g-grey-700); margin: 0 0 1rem; line-height: 1.5; }
.g-form__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 1rem; }
.g-field { margin-bottom: 1rem; }
.g-field--wide { grid-column: 1 / -1; }
.g-field label { display: block; font-size: 0.75rem; font-weight: 600; margin-bottom: 0.3rem; color: var(--g-grey-700); }
.g-field input[type="text"], .g-field input[type="number"], .g-field input[type="url"], .g-field input[type="date"], .g-field input[type="search"], .g-field select, .g-field textarea {
    width: 100%; font: inherit; font-size: 0.875rem; padding: 0.55rem 0.75rem; border: 1.5px solid var(--g-grey-300); border-radius: var(--g-radius-sm); background: var(--g-white); color: var(--g-black); box-sizing: border-box; }
.g-field input:focus, .g-field select:focus, .g-field textarea:focus { outline: none; border-color: var(--g-black); }
.g-field input:disabled, .g-field select:disabled { background: var(--g-grey-50); color: var(--g-grey-500); }
.g-field .help-text { font-size: 0.8rem; color: var(--g-grey-500); margin-top: 0.25rem; }
.g-field--check { display: flex; align-items: center; gap: 0.5rem; }
.g-field--check label { margin: 0; }
.g-field .g-money { display: flex; align-items: center; gap: 0.35rem; }
.g-field ul { color: var(--rating-poor); font-size: 0.8rem; margin: 0.3rem 0 0; padding-left: 1rem; }

.g-rows { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 0.75rem; }
.g-row { display: grid; gap: 0.6rem; align-items: start; border: 1.5px solid var(--g-grey-100); border-radius: var(--g-radius-sm); padding: 0.75rem; background: var(--g-grey-50); }
.g-row--variant { grid-template-columns: 8rem minmax(0, 1fr) 9rem 9rem auto; }
.g-row--step { grid-template-columns: 8rem minmax(0, 1fr) 10rem 6rem 6rem 8rem 9rem auto; }
@media (max-width: 1200px) { .g-row--step, .g-row--variant { grid-template-columns: 1fr 1fr; } }
.g-row .g-field { margin: 0; }
.g-row__actions { display: flex; gap: 0.25rem; padding-top: 1.3rem; }
.g-icon-btn { border: 1.5px solid var(--g-grey-300); background: var(--g-white); border-radius: 6px; width: 2rem; height: 2rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.g-icon-btn:hover { border-color: var(--g-black); }
.g-icon-btn svg { width: 1rem; height: 1rem; }

.g-form__actions { display: flex; gap: 0.6rem; position: sticky; bottom: 0; padding: 1rem 0; background: linear-gradient(transparent, var(--strix-grey-50) 30%); }

/* ── Letter tiles ────────────────────────────────────────────────────────── */
.g-grade { display: inline-flex; align-items: center; justify-content: center; border: var(--g-border); border-radius: 6px; font-weight: 800; line-height: 1; box-sizing: border-box; }
.g-grade--sm { width: 1.35rem; height: 1.35rem; font-size: 0.75rem; border-width: 1.5px; border-radius: 4px; }
.g-grade--md { width: 2rem; height: 2rem; font-size: 1rem; }
.g-grade--lg { width: 3.5rem; height: 3.5rem; font-size: 1.9rem; border-radius: 10px; }
.g-grade--a { background: var(--g-yellow); color: var(--g-black); }
.g-grade--b { background: var(--g-white); color: var(--g-black); }
.g-grade--c { background: var(--g-grey-50); color: var(--g-black); }
.g-grade--d { background: var(--g-black); color: var(--g-white); }
.g-grade--provisional { position: relative; }
.g-grade--provisional::after { content: ''; position: absolute; top: -4px; right: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--g-yellow); border: 1.5px solid var(--g-black); }
.g-grade--none { background: transparent; color: var(--g-grey-500); border-color: var(--g-grey-300); border-style: dashed; }
.g-blocks { display: inline-flex; gap: 5px; }

/* ── All clients overview ────────────────────────────────────────────────── */
.g-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; }
.g-kpi { border: 1.5px solid var(--g-grey-100); border-radius: var(--g-radius-md); padding: 0.9rem 1.1rem; background: var(--g-white); }
.g-kpi__value { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; }
.g-kpi__label { font-size: 0.8rem; color: var(--g-grey-700); }

.g-signalbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.g-signalbar__item { display: inline-flex; align-items: baseline; gap: 0.35rem; padding: 0.35rem 0.75rem; border: 1.5px solid var(--g-black); border-radius: 999px; background: var(--g-white); font: inherit; font-size: 0.82rem; cursor: pointer; }
.g-signalbar__item strong { font-size: 0.95rem; }
.g-signalbar__item--quiet { border-color: var(--g-grey-100); color: var(--g-grey-500); }
.g-signalbar__item.is-active { background: var(--g-black); border-color: var(--g-black); color: var(--g-white); }
.g-signals { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.75rem; margin-bottom: 2rem; }
.g-signal { border: var(--g-border); border-radius: var(--g-radius-md); padding: 1rem 1.15rem; background: var(--g-white); }
.g-signal--quiet { border: 1.5px solid var(--g-grey-100); }
.g-signal__head { display: flex; align-items: baseline; gap: 0.6rem; }
.g-signal__count { font-size: 1.6rem; font-weight: 800; }
.g-signal__label { font-weight: 700; font-size: 0.9rem; }
.g-signal__action { font-size: 0.8rem; color: var(--g-grey-700); margin: 0.35rem 0 0.5rem; line-height: 1.45; }
.g-signal__list { font-size: 0.8rem; margin: 0; padding-left: 1rem; }
.g-signal__list li { margin: 0.1rem 0; }

.g-pill.is-active { background: var(--g-black); color: var(--g-white) !important; border-color: var(--g-black); }
button.g-pill { font: inherit; font-size: 0.8rem; cursor: pointer; }

.g-table-wrap { overflow-x: auto; background: var(--g-white); border: 1.5px solid var(--g-grey-100); border-radius: var(--g-radius-md); }
.g-overview { min-width: 1250px; }
.g-overview th.is-sortable { cursor: pointer; }
.g-overview th.is-sorted { color: var(--g-black); }
.g-overview td { vertical-align: middle; }
.g-client__name { font-weight: 600; }
.g-client__meta { font-size: 0.75rem; color: var(--g-grey-500); }
.g-tag { display: inline-block; font-size: 0.68rem; font-weight: 600; padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--g-grey-50); color: var(--g-grey-700); margin-right: 0.2rem; }
.g-tag--warn { background: var(--g-yellow); color: var(--g-black); }
.g-tag--dark { background: var(--g-black); color: var(--g-white); }
.g-audit { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.8rem; letter-spacing: 0.1em; color: var(--g-grey-300); }
.g-audit b { color: var(--g-black); }
.g-bar { height: 4px; background: var(--g-grey-100); border-radius: 2px; margin-top: 3px; width: 5rem; }
.g-bar span { display: block; height: 100%; background: var(--g-black); border-radius: 2px; max-width: 100%; }
.g-bar--low span { background: var(--g-grey-500); }
.g-legend { font-size: 0.78rem; color: var(--g-grey-700); margin-top: 1rem; line-height: 1.7; }
.g-sync { font-size: 0.8rem; color: var(--g-grey-700); }
.g-sync--bad { color: var(--rating-poor); }

/* ── Client page ─────────────────────────────────────────────────────────── */
.g-total { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.g-trend { display: flex; gap: 3px; margin-left: auto; }
.g-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.9rem; }
.g-tile { display: flex; flex-direction: column; gap: 0.55rem; background: var(--g-white); border: 1.5px solid var(--g-grey-100); border-radius: var(--g-radius-md); padding: 1rem 1.1rem; }
.g-tile--d { border: var(--g-border); }
.g-tile--c { border-color: var(--g-grey-300); }
.g-tile__head { display: flex; align-items: center; gap: 0.7rem; }
.g-tile__num { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--g-grey-500); }
.g-tile__name { font-weight: 700; }
.g-tile__trend { margin-left: auto; font-size: 0.75rem; color: var(--g-grey-700); white-space: nowrap; }
.g-tile__measures { margin: 0; padding-left: 1rem; font-size: 0.82rem; line-height: 1.5; }
.g-tile__shops { font-size: 0.75rem; color: var(--g-grey-500); margin: 0 0 0.5rem; }
.g-tile__instruction { margin: 0; font-size: 0.8rem; font-weight: 600; background: var(--g-grey-50); border-radius: 6px; padding: 0.35rem 0.55rem; }
.g-tile--d .g-tile__instruction { background: var(--g-black); color: var(--g-white); }
.g-tile--c .g-tile__instruction { background: var(--g-yellow); }
.g-tile__rec { display: flex; flex-direction: column; gap: 0.15rem; border-top: 1px solid var(--g-grey-100); padding-top: 0.55rem; font-size: 0.82rem; margin-top: auto; }
.g-tile__rec a { text-decoration: none; }
.g-tile__source { margin: 0; font-size: 0.7rem; color: var(--g-grey-500); }
.g-questions { margin: 0; padding-left: 1.1rem; line-height: 1.55; font-size: 0.9rem; }
.g-questions li { margin-bottom: 0.4rem; }
.g-note { border-bottom: 1px solid var(--g-grey-100); padding: 0.5rem 0; }
.g-note:last-of-type { border-bottom: none; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

/* ── Breakdowns ──────────────────────────────────────────────────────────── */
.g-breakdown-choices > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.35rem 1rem; margin-bottom: 1rem; font-size: 0.85rem; }
.g-breakdown-choices label { display: inline; margin-left: 0.35rem; }
.g-bd { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.g-bd li { display: grid; grid-template-columns: 1.35rem minmax(0, 1fr); gap: 0.5rem; align-items: start; font-size: 0.8rem; line-height: 1.4; }
.g-bd__label { font-weight: 600; }
.g-bd__head { color: var(--g-grey-700); }
.g-bd__services { font-size: 0.72rem; color: var(--g-grey-700); }
.g-bd__services a { text-decoration: none; border-bottom: 1px solid var(--g-grey-300); }
.g-bd--missing { opacity: 0.55; }
.g-bd--stale .g-bd__head { color: var(--rating-poor); }
.g-provisional { display: inline-block; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; border: 1.5px dashed var(--g-black); border-radius: 4px; padding: 0 0.3rem; margin-left: 0.3rem; vertical-align: middle; }
.g-status--idea { background: var(--g-white); border: 1.5px dashed var(--g-grey-500); color: var(--g-grey-700); }

/* ── Shopstatus: client view (Klant.dc.html) ─────────────────────────────── */
.g-strip { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.g-strip > div { display: flex; flex-direction: column; }
.g-strip strong { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.g-strip span { font-size: 0.8rem; color: var(--g-grey-500); }
.g-legend { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 0.6rem; align-items: center; margin: 0; }
.g-legend dt, .g-legend dd { margin: 0; }
.g-proposal { margin-top: 0.75rem; padding: 0.75rem 0.85rem; border: var(--g-border); border-radius: var(--g-radius-sm); background: var(--g-white); font-size: 0.85rem; }
.g-proposal p { margin: 0 0 0.35rem; line-height: 1.5; }
.g-proposal__label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--g-grey-500); }
.g-proposal__price { font-weight: 600; }
@media print {
    .g-noprint, .topbar, .projects-subnav { display: none !important; }
    .g-status-page .g-tile, .g-status-page .g-panel { break-inside: avoid; }
}

.g-info { position: relative; display: inline-flex; vertical-align: middle; color: var(--g-grey-500); cursor: help; margin-left: 0.25rem; outline: none; }
.g-info svg { width: 1.1rem; height: 1.1rem; }
.g-info:hover, .g-info:focus { color: var(--g-black); }
/* The tip itself: shown on hover and on focus, so a click or tap opens it too (a native title does neither). */
.g-info__tip { display: none; position: absolute; top: calc(100% + 0.5rem); left: 0; z-index: 50; width: min(26rem, 80vw);
    background: var(--g-black); color: var(--g-white); font-size: 0.85rem; font-weight: 400; letter-spacing: 0; line-height: 1.5;
    padding: 0.75rem 0.9rem; border-radius: var(--g-radius-sm); box-shadow: 0 8px 24px rgba(0,0,0,0.18); white-space: normal; }
.g-info:hover .g-info__tip, .g-info:focus .g-info__tip, .g-info:focus-within .g-info__tip { display: block; }

/* Quarterly audit (templates/growth/audits): status chip, measurement, findings, actions, documents. */
.g-astatus { display: inline-block; font-size: 0.7rem; font-weight: 600; padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--g-grey-50); color: var(--g-grey-700); white-space: nowrap; }
.g-astatus--in_progress { background: var(--g-yellow); color: var(--g-black); }
.g-astatus--delivered { background: var(--g-white); border: 1.5px solid var(--g-black); color: var(--g-black); }
.g-astatus--discussed { background: var(--g-black); color: var(--g-white); }
.g-astatus--cancelled { text-decoration: line-through; }
.g-audit-total { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.g-audit-bd { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; margin-bottom: 0.2rem; }
.g-trend-sign { font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.g-trend-sign--better { color: var(--rating-good); }
.g-trend-sign--worse { color: var(--rating-poor); }
.g-trend-sign--new, .g-trend-sign--gone, .g-trend-sign--same { color: var(--g-grey-500); }
.g-audit-part { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; margin: 1rem 0 0.4rem; }
.g-audit-part:first-of-type { margin-top: 0; }
.g-audit-letter { display: inline-flex; width: 1.5rem; height: 1.5rem; align-items: center; justify-content: center; border: var(--g-border); border-radius: 4px; font-size: 0.8rem; }
.g-audit-finding, .g-audit-doc { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.5rem 0; border-bottom: 1px solid var(--g-grey-100); }
.g-audit-finding > div, .g-audit-doc > div { flex: 1; min-width: 0; }
.g-audit-doc > svg { width: 1.2rem; height: 1.2rem; flex-shrink: 0; margin-top: 0.1rem; }
.g-audit-doc a { word-break: break-word; }
.g-audit-body { font-size: 0.85rem; color: var(--g-grey-700); margin-top: 0.2rem; line-height: 1.5; }
.g-audit-add { margin-top: 1rem; padding-top: 1rem; border-top: 1.5px dashed var(--g-grey-100); }
.g-audit-label { font-size: 0.75rem; font-weight: 600; color: var(--g-grey-700); margin: 0 0 0.4rem !important; }
.g-audit-done td { color: var(--g-grey-500); }
.g-audit-done td:nth-child(2) { text-decoration: line-through; }
.g-audit-missing { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.g-audit-list { list-style: none; margin: 0; padding: 0; }
.g-audit-list li { display: flex; gap: 0.6rem; align-items: center; padding: 0.4rem 0; border-bottom: 1px solid var(--g-grey-100); font-size: 0.875rem; }
.g-audit-list li:last-child { border-bottom: none; }
.g-audit-blocks { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.4rem 1rem; }
.g-audit-block { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; }

/* Exit clients (GrowthCompany::TIER_EXIT): we do nothing (more) for them, so they recede in the list. */
.g-row--exit td { color: var(--g-grey-500); }
.g-row--exit .g-client__name a { color: var(--g-grey-500); }

/* Manual (templates/manual/*.md rendered with markdown_to_html): readable column, Strix type. */
.g-manual-layout { display: grid; gap: 1.5rem; max-width: 900px; }
.g-manual { max-width: 900px; line-height: 1.6; }
.g-manual h1 { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 1rem; }
.g-manual h2 { font-size: 1.35rem; font-weight: 700; margin: 2rem 0 0.6rem; padding-top: 1rem; border-top: 1px solid var(--g-grey-100); }
.g-manual h2:first-of-type { border-top: 0; padding-top: 0; }
.g-manual h3 { font-size: 1.05rem; font-weight: 700; margin: 1.4rem 0 0.4rem; }
.g-manual p, .g-manual li { font-size: 0.95rem; }
.g-manual ul, .g-manual ol { padding-left: 1.3rem; margin: 0 0 1rem; }
.g-manual li { margin-bottom: 0.35rem; }
.g-manual table { width: 100%; border-collapse: collapse; font-size: 0.875rem; margin: 0.5rem 0 1.25rem; }
.g-manual th { text-align: left; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--g-grey-500); padding: 0.5rem 0.6rem; border-bottom: var(--g-border); }
.g-manual td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--g-grey-100); vertical-align: top; }
.g-manual code { font-size: 0.85em; background: var(--g-grey-50); padding: 0.1rem 0.35rem; border-radius: 4px; }

/* Alle klanten: a customer row with its webshops below (one <tbody> per customer). */
.g-overview tbody.g-company { border-top: 2px solid var(--g-grey-100); }
.g-overview tr.g-website td { background: var(--g-grey-50); border-bottom: 1px solid var(--g-white); padding-top: 0.35rem; padding-bottom: 0.35rem; }
.g-website__name { font-size: 0.82rem; font-weight: 600; text-decoration: none; padding-left: 0.6rem; white-space: nowrap; }
.g-website__name:hover { text-decoration: underline; }
.g-overview tr.g-website .g-client__meta { padding-left: 1.6rem; }

/* Client page: one tab per webshop; the scores below are that webshop's. */
.g-websites { margin: -0.25rem 0 1.25rem; }
.g-websites__tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.g-websites__tab { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.8rem 0.4rem 0.45rem; border: 1.5px solid var(--g-grey-300); border-radius: 999px; background: var(--g-white); font-size: 0.85rem; font-weight: 600; text-decoration: none; }
.g-websites__tab:hover { border-color: var(--g-black); }
.g-websites__tab.is-active { border: var(--g-border); background: var(--g-yellow); }
.g-websites__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.6rem; font-size: 0.85rem; }

.g-audit-site { font-size: 1rem; margin: 1.25rem 0 0.5rem; }
.g-audit-site:first-of-type { margin-top: 0; }

/* Searchable checklist (checklist_controller.js), the webshops of a customer */
.g-checklist__bar { display: flex; align-items: center; gap: 0.75rem; margin: 0.25rem 0 0.4rem; }
.g-checklist__search { flex: 1; max-width: 320px; }
.g-checklist__list { max-height: 260px; overflow-y: auto; border: 1.5px solid var(--g-grey-100); border-radius: var(--g-radius-md); padding: 0.25rem 0; background: var(--g-white); }
.g-checklist__row { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.75rem; font-size: 0.85rem; font-weight: 400; cursor: pointer; }
.g-checklist__row:hover { background: var(--g-grey-50, var(--strix-grey-50)); }
.g-checklist__row.is-checked { font-weight: 600; background: var(--strix-yellow-soft); }

/* ── Client page: three sections, Score / Bouwblokken / Klant en triage ─────
   Score is measurement only (black and grey); Bouwblokken is what we offer
   (yellow accent). The two never share a card, so a number is never read as
   a sales pitch and an offer never hides inside a measurement. */
.g-grade--xl { width: 5.5rem; height: 5.5rem; font-size: 3.2rem; border-width: 3px; border-radius: 14px; }
.g-grade--xl.g-grade--provisional::after { width: 12px; height: 12px; top: -6px; right: -6px; }

.g-facts--head { margin: -0.5rem 0 1.25rem; }
.g-facts--head .g-fact { border: 1.5px solid var(--g-grey-100); min-width: 10rem; }
.g-facts--head .g-fact--accent { border: var(--g-border); }
.g-meter { display: block; height: 5px; margin-top: 0.35rem; background: var(--g-grey-100); border-radius: 3px; overflow: hidden; }
.g-meter span { display: block; height: 100%; background: var(--g-black); }
.g-meter--over span { background: var(--rating-poor); }

.g-jump { position: sticky; top: 0; z-index: 20; display: flex; gap: 0.35rem; padding: 0.6rem 0; margin-bottom: 0.5rem; background: var(--strix-grey-50); }
.g-jump a { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.9rem 0.35rem 0.4rem; border: 1.5px solid var(--g-grey-300); border-radius: 999px; background: var(--g-white); font-size: 0.85rem; font-weight: 600; text-decoration: none; }
.g-jump a:hover { border-color: var(--g-black); }
.g-jump__num { display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--g-black); color: var(--g-white); font-size: 0.75rem; }

.g-section { margin: 0 0 2.5rem; scroll-margin-top: 3.5rem; }
.g-section__head { display: flex; align-items: center; gap: 0.9rem; padding-bottom: 0.75rem; margin-bottom: 1.25rem; border-bottom: var(--g-border); }
.g-section__num { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--g-black); color: var(--g-white); font-weight: 800; font-size: 1.15rem; }
.g-section--act .g-section__num { background: var(--g-yellow); color: var(--g-black); border: var(--g-border); }
.g-section__title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.g-section__sub { margin: 0.1rem 0 0; font-size: 0.875rem; color: var(--g-grey-700); }
.g-subhead { font-size: 1rem; font-weight: 700; margin: 1.75rem 0 0.75rem; }
.g-section--act { background: var(--strix-yellow-soft); border: var(--g-border); border-radius: var(--g-radius-md); padding: 1.4rem 1.5rem 0.5rem; }
.g-section--act .g-section__head { border-bottom-color: var(--g-black); }

/* Fills by letter, shared by the bar chart, the breakdown bars and the history:
   the worse the letter, the darker the bar, like the letter tile itself. */
.g-fill--a { background: var(--g-yellow); box-shadow: inset 0 0 0 1.5px var(--g-black); }
.g-fill--b { background: var(--g-grey-500); }
.g-fill--c { background: var(--g-grey-700); }
.g-fill--d { background: var(--g-black); }
.g-fill--none { background: var(--g-grey-300); }

.g-score { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.25rem; align-items: stretch; }
@media (max-width: 1100px) { .g-score { grid-template-columns: 1fr; } }
.g-score__total, .g-score__blocks { background: var(--g-white); border: 1.5px solid var(--g-grey-100); border-radius: var(--g-radius-md); padding: 1.4rem 1.5rem; }
.g-score__total { border: var(--g-border); }
.g-score__hero { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.4rem; }
.g-score__number { font-size: 3rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.g-score__number span { font-size: 1.1rem; font-weight: 600; color: var(--g-grey-500); margin-left: 0.15rem; }
.g-score__note { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; margin: 0.9rem 0 0; }
.g-score__note svg { width: 1rem; height: 1rem; flex-shrink: 0; }

.g-delta { display: inline-block; margin-top: 0.4rem; font-size: 0.78rem; font-weight: 600; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--g-grey-50); color: var(--g-grey-700); white-space: nowrap; }
.g-delta--up { background: var(--rating-good-bg); color: var(--rating-good); }
.g-delta--down { background: var(--rating-poor-bg); color: var(--rating-poor); }

/* Gauge: the four letter bands with a marker at the score. */
.g-gauge { position: relative; padding-bottom: 1.2rem; }
.g-gauge__track { display: flex; height: 1.9rem; border-radius: 6px; overflow: hidden; border: 1.5px solid var(--g-black); }
.g-gauge__zone { display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; color: var(--g-grey-500); background: var(--g-grey-50); border-right: 1px solid var(--g-grey-100); }
.g-gauge__zone:last-child { border-right: none; }
.g-gauge__zone--a { background: var(--strix-yellow-soft); }
.g-gauge__zone.is-on { background: var(--g-black); color: var(--g-white); }
.g-gauge__zone--a.is-on { background: var(--g-yellow); color: var(--g-black); }
.g-gauge__marker { position: absolute; top: -0.35rem; width: 3px; height: 2.6rem; margin-left: -1.5px; background: var(--g-black); border-radius: 2px; box-shadow: 0 0 0 2px var(--g-white); }
.g-gauge__ticks { position: absolute; left: 0; right: 0; bottom: 0; height: 1rem; font-size: 0.68rem; color: var(--g-grey-500); }
.g-gauge__ticks span { position: absolute; transform: translateX(-50%); }
.g-gauge__ticks span:first-child { transform: none; }
.g-gauge__ticks span:last-child { transform: translateX(-100%); }

/* History: one column per month, height is the score. */
.g-history { display: flex; align-items: flex-end; gap: 0.5rem; height: 6.5rem; margin-top: 1.25rem; padding-top: 0.75rem; border-top: 1px solid var(--g-grey-100); }
.g-history__col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.g-history__bar { width: 100%; max-width: 2.25rem; min-height: 3px; border-radius: 4px 4px 0 0; opacity: 0.45; }
.g-history__col.is-now .g-history__bar { opacity: 1; }
.g-history__val { font-size: 0.75rem; font-weight: 700; margin-top: 0.2rem; }
.g-history__month { font-size: 0.65rem; color: var(--g-grey-500); }

/* Bar chart per block, against the same bands. */
.g-chart__head, .g-chart__row { display: grid; grid-template-columns: 1.35rem 12rem minmax(0, 1fr) 4.5rem; gap: 0.75rem; align-items: center; }
@media (max-width: 640px) {
    /* On a phone the bar gets its own line under the name. */
    .g-chart__head { grid-template-columns: 1fr auto; }
    .g-chart__head > .g-panel__title { grid-column: 1; }
    .g-chart__axis { display: none; }
    .g-chart__row { grid-template-columns: 1.35rem minmax(0, 1fr) auto; grid-template-areas: "tile label weight" "track track track"; row-gap: 0.35rem; }
    .g-chart__row > .g-grade { grid-area: tile; }
    .g-chart__label { grid-area: label; }
    .g-chart__track { grid-area: track; }
    .g-chart__weight { grid-area: weight; }
    .g-section--act { padding: 1rem 0.9rem 0.25rem; }
}
.g-chart__head { margin-bottom: 0.6rem; }
.g-chart__head > .g-panel__title { grid-column: 1 / 3; }
.g-chart__axis { position: relative; height: 1rem; font-size: 0.68rem; font-weight: 700; color: var(--g-grey-500); }
.g-chart__axis span { position: absolute; transform: translateX(-50%); }
.g-chart__weight-head { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--g-grey-500); text-align: right; }
.g-chart { list-style: none; margin: 0; padding: 0; }
.g-chart__row { padding: 0.45rem 0.35rem; margin: 0 -0.35rem; border-radius: 6px; text-decoration: none; }
.g-chart__row:hover { background: var(--g-grey-50); }
.g-chart__label { font-size: 0.875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-chart__num { display: inline-block; width: 1.1rem; color: var(--g-grey-500); font-weight: 600; }
.g-chart__row.is-empty .g-chart__label { color: var(--g-grey-500); }
.g-chart__track { position: relative; height: 1.25rem; background: var(--g-grey-50); border-radius: 4px; }
.g-chart__track i { position: absolute; top: -3px; bottom: -3px; width: 0; border-left: 1px dashed var(--g-grey-300); z-index: 1; }
.g-chart__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.g-chart__value { position: absolute; top: 50%; transform: translate(0.4rem, -50%); font-size: 0.78rem; font-weight: 700; z-index: 2; }
.g-chart__empty { position: absolute; inset: 0; display: flex; align-items: center; padding-left: 0.6rem; font-size: 0.75rem; font-style: italic; color: var(--g-grey-500); border: 1.5px dashed var(--g-grey-300); border-radius: 4px; background: var(--g-white); }
.g-chart__weight { font-size: 0.8rem; font-weight: 600; text-align: right; color: var(--g-grey-700); white-space: nowrap; }
.g-chart__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.75rem; color: var(--g-grey-700); margin: 0.9rem 0 0; }

/* What was measured: one card per block, a row per breakdown with its own bar. */
.g-measure-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0.9rem; }
.g-measure { display: flex; flex-direction: column; gap: 0.7rem; background: var(--g-white); border: 1.5px solid var(--g-grey-100); border-left-width: 6px; border-radius: var(--g-radius-md); padding: 1rem 1.1rem; scroll-margin-top: 3.5rem; }
.g-measure:target { box-shadow: 0 0 0 3px var(--g-yellow); }
.g-measure--a { border-left-color: var(--g-yellow); }
.g-measure--b { border-left-color: var(--g-grey-500); }
.g-measure--c { border-left-color: var(--g-grey-700); }
.g-measure--d { border-left-color: var(--g-black); }
.g-measure--none { border-left-style: dashed; border-left-color: var(--g-grey-300); }
.g-measure__head { display: flex; align-items: center; gap: 0.7rem; }
.g-measure__score { margin-left: auto; font-size: 1.35rem; font-weight: 800; }
.g-mrows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.g-mrow { display: grid; grid-template-columns: 1.35rem minmax(0, 1fr) 1.8rem; gap: 0.6rem; align-items: start; font-size: 0.8rem; line-height: 1.35; }
.g-mrow .g-grade { margin-top: 0.05rem; }
.g-mrow__text { display: flex; flex-direction: column; min-width: 0; }
.g-mrow__label { font-weight: 600; }
.g-mrow__head { color: var(--g-grey-700); }
.g-mrow__score { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.g-mrow.is-missing { opacity: 0.55; }
.g-mrow.is-stale .g-mrow__head { color: var(--rating-poor); }
.g-mbar { display: block; height: 6px; margin-top: 0.3rem; background: var(--g-grey-100); border-radius: 3px; overflow: hidden; }
/* 2a behind the letter: each p75 in its RUM-card colour (Strix bar), the target under it. */
.g-cwv { width: 100%; margin-top: 0.45rem; border-collapse: separate; border-spacing: 2px; font-size: 0.7rem; font-variant-numeric: tabular-nums; }
.g-cwv th { font-weight: 600; color: var(--g-grey-700); text-align: left; padding: 0 0.25rem; }
.g-cwv__cell { padding: 0.2rem 0.3rem; border-radius: 4px; vertical-align: top; }
.g-cwv__p75 { display: block; font-weight: 700; }
.g-cwv__floor, .g-cwv__target { display: block; font-size: 0.62rem; }
.g-cwv__floor { font-weight: 600; }
.g-cwv--good { background: var(--rating-good-bg); color: var(--rating-good); }
.g-cwv--ni   { background: var(--rating-warn-bg); color: var(--rating-warn); }
.g-cwv--poor { background: var(--rating-poor-bg); color: var(--rating-poor); }
.g-cwv--none { color: var(--g-grey-300); }
.g-cwv__target--missed { text-decoration: underline; }
.g-cwv__target--stretch { font-weight: 700; }
.g-coverage { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.1rem; font-size: 0.8rem; color: var(--g-grey-700); }
.g-coverage__dots { display: inline-flex; gap: 3px; }
.g-coverage__dots span { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: 4px; border: 1.5px dashed var(--g-grey-300); font-size: 0.65rem; font-weight: 700; color: var(--g-grey-500); }
.g-coverage__dots span.is-on { background: var(--g-black); border: 1.5px solid var(--g-black); color: var(--g-white); }
.g-coverage__dots span.is-off { border-style: solid; border-color: var(--g-grey-100); color: var(--g-grey-300); }
.g-mbar span { display: block; height: 100%; border-radius: 3px; box-shadow: none; }

/* Bouwblokken: the instruction key, then one card per block that needs work. */
.g-instructions { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
@media (max-width: 960px) { .g-instructions { grid-template-columns: 1fr 1fr; } }
.g-instructions li { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.5rem; align-items: center; background: var(--g-white); border: 1.5px solid var(--g-black); border-radius: var(--g-radius-sm); padding: 0.55rem 0.7rem; font-size: 0.82rem; }
.g-instructions li.is-quiet { border-color: var(--g-grey-100); color: var(--g-grey-500); }
.g-instructions__text { grid-column: 1 / -1; font-size: 0.72rem; line-height: 1.35; color: var(--g-grey-700); }

.g-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: 0.9rem; }
@media (max-width: 560px) { .g-actions { grid-template-columns: 1fr; } }
.g-action { display: flex; flex-direction: column; gap: 0.8rem; background: var(--g-white); border: 1.5px solid var(--g-grey-300); border-radius: var(--g-radius-md); padding: 1rem 1.1rem; }
.g-action--d { border: var(--g-border); box-shadow: 4px 4px 0 var(--g-black); }
.g-action--c { border-color: var(--g-black); }
.g-action__head { display: flex; align-items: center; gap: 0.7rem; }
.g-action__when { margin-left: auto; max-width: 15rem; font-size: 0.72rem; font-weight: 600; line-height: 1.3; text-align: right; padding: 0.3rem 0.55rem; border-radius: 6px; background: var(--g-grey-50); }
.g-action--d .g-action__when { background: var(--g-black); color: var(--g-white); }
.g-action--c .g-action__when { background: var(--g-yellow); }
.g-action__flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr); gap: 0.5rem; align-items: stretch; }
@media (max-width: 560px) { .g-action__flow { grid-template-columns: 1fr; } .g-action__arrow { transform: rotate(90deg); } }
.g-action__problem, .g-action__block { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.65rem 0.75rem; border-radius: var(--g-radius-sm); text-decoration: none; min-width: 0; }
.g-action__problem { background: var(--g-grey-50); }
.g-action__problem:hover { background: var(--g-grey-100); }
.g-action__block { background: var(--g-yellow); border: var(--g-border); }
.growth .g-action__block:hover { color: var(--g-black); box-shadow: 3px 3px 0 var(--g-black); }
.g-action__block.is-idea { background: var(--g-white); border-style: dashed; }
.g-action__block.is-missing { background: var(--g-white); border: 1.5px dashed var(--g-grey-500); }
.g-action__arrow { display: flex; align-items: center; justify-content: center; }
.g-action__arrow svg { width: 1.4rem; height: 1.4rem; }
.g-action__eyebrow { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--g-grey-700); }
.g-action__line { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; font-size: 0.9rem; line-height: 1.3; }
.g-action__detail { font-size: 0.78rem; color: var(--g-grey-700); line-height: 1.4; }
.g-action__meta { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; margin-top: auto; padding-top: 0.2rem; }
.g-action__block .g-code { background: var(--g-white); }
.g-action__more { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0; font-size: 0.78rem; }

.g-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.65rem 0.2rem 0.3rem; border: 1.5px solid var(--g-grey-300); border-radius: 999px; background: var(--g-white); font-size: 0.78rem; text-decoration: none; }
.g-chip:not(:has(.g-grade)) { padding-left: 0.65rem; }
.g-chip:hover { border-color: var(--g-black); }
.g-chip--dashed { border-style: dashed; color: var(--g-grey-700); }
.g-action-rest { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.g-action-rest p { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0; }
.g-action-rest__label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--g-grey-700); margin-right: 0.4rem; }

.g-ostatus { display: inline-block; font-size: 0.7rem; font-weight: 600; padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--g-white); border: 1.5px solid var(--g-grey-300); color: var(--g-grey-700); white-space: nowrap; }
.g-ostatus--sent { border-color: var(--g-black); color: var(--g-black); }
.g-ostatus--won { background: var(--g-black); border-color: var(--g-black); color: var(--g-white); }
.g-ostatus--delivered { background: var(--rating-good-bg); border-color: var(--rating-good-line); color: var(--rating-good); }
.g-ostatus--lost { text-decoration: line-through; }
.g-section--act .g-panel { border-color: var(--g-black); overflow-x: auto; }
.g-section .g-columns > * { min-width: 0; }

.g-pipeline { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 1rem; padding: 0; }
.g-pipeline__step { display: inline-flex; align-items: baseline; gap: 0.35rem; padding: 0.35rem 0.8rem; border-radius: 999px; font-size: 0.8rem; background: var(--g-grey-50); }
.g-pipeline__step strong { font-size: 1rem; }
.g-pipeline__step--sent { border: 1.5px solid var(--g-black); background: var(--g-white); }
.g-pipeline__step--won { background: var(--g-black); color: var(--g-white); }
.g-pipeline__step--delivered { background: var(--rating-good-bg); color: var(--rating-good); }
.g-pipeline__step.is-quiet { background: var(--g-white); border: 1.5px solid var(--g-grey-100); color: var(--g-grey-500); }

/* Klant en triage */
.g-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
@media (max-width: 1100px) { .g-trio { grid-template-columns: 1fr; } }
.g-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.g-people li { display: flex; align-items: center; gap: 0.65rem; font-size: 0.85rem; line-height: 1.3; }
.g-people__role { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 1.5px solid var(--g-grey-300); font-size: 0.7rem; font-weight: 700; }
.g-people li.is-driver .g-people__role { background: var(--g-yellow); border: var(--g-border); }
.g-people .g-tag { margin-left: auto; }

/* ── Seven block tiles (Shopstatus "Uw score") ───────────────────────────── */
.g-btiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.6rem; }
.g-btile { display: flex; align-items: center; gap: 0.75rem; height: 100%; box-sizing: border-box; padding: 0.75rem 0.85rem; border: 1.5px solid var(--g-grey-100); border-left-width: 6px; border-radius: var(--g-radius-sm); background: var(--g-white); text-decoration: none; }
.g-btile:hover { border-color: var(--g-black); }
.g-btile--a { border-left-color: var(--g-yellow); }
.g-btile--b { border-left-color: var(--g-grey-500); }
.g-btile--c { border-left-color: var(--g-grey-700); }
.g-btile--d { border-left-color: var(--g-black); }
.g-btile--none { border-left-style: dashed; border-left-color: var(--g-grey-300); }
.g-btile__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.g-btile__num { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--g-grey-500); }
.g-btile__name { font-weight: 700; font-size: 0.9rem; line-height: 1.25; }
.g-btile__measure { font-size: 0.75rem; color: var(--g-grey-700); line-height: 1.35; margin-top: 0.15rem; }
.g-btile--none .g-btile__name { color: var(--g-grey-500); }
.g-btile .g-delta { margin-top: 0; align-self: flex-start; }
.g-score--client { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
@media (max-width: 1100px) { .g-score--client { grid-template-columns: 1fr; } }
.g-score__meaning { font-size: 1.3rem; font-weight: 700; line-height: 1.2; }
.g-score__legend { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 0.55rem; align-items: center; margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--g-grey-100); font-size: 0.82rem; }
.g-score__legend dt, .g-score__legend dd { margin: 0; }
.g-score__legend dd.is-now { font-weight: 700; }

/* ── Team and quarter (Shopstatus, internal page) ────────────────────────── */
.g-quarter-now { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; align-items: stretch; }
@media (max-width: 800px) { .g-quarter-now { grid-template-columns: 1fr; } }
.g-quarter-now .g-panel { margin-bottom: 0; }
.g-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.875rem; }
.g-checks li { display: flex; align-items: center; gap: 0.45rem; color: var(--g-grey-500); }
.g-checks li.is-done { color: var(--g-black); }
.g-checks svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; }
.g-checks__letter { display: inline-flex; align-items: center; justify-content: center; width: 1.2rem; height: 1.2rem; border-radius: 4px; border: 1.5px solid currentColor; font-size: 0.65rem; font-weight: 700; }
.g-parts { display: inline-flex; gap: 2px; margin-left: 0.35rem; vertical-align: middle; }
.g-parts span { display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; border-radius: 3px; border: 1.5px solid var(--g-grey-300); font-size: 0.6rem; font-weight: 700; color: var(--g-grey-500); }
.g-parts span.is-done { background: var(--g-black); border-color: var(--g-black); color: var(--g-white); }
.g-table-scroll { overflow-x: auto; background: var(--g-white); border: 1.5px solid var(--g-grey-100); border-radius: var(--g-radius-md); padding: 0.25rem 0.5rem; }
.g-panel .g-table-scroll { border: none; padding: 0; }
.g-quarters { min-width: 640px; }
.g-quarters td { vertical-align: middle; }
.g-quarters tr.is-current td { background: var(--strix-yellow-soft); }
.g-quarters__score { display: inline-flex; align-items: center; gap: 0.5rem; }
.g-quarters__score .g-blocks { gap: 2px; }

/* NPS: the client's form and the internal answers. */
.g-npsform { grid-column: 1 / -1; }
.g-form .g-scale { border: none; margin: 0 0 1rem; padding: 0; background: none; border-radius: 0; }
.g-form .g-scale legend { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.45rem; padding: 0; }
.g-scale__opts { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.g-scale__opt { position: relative; cursor: pointer; }
.g-scale__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.g-scale__opt span { display: inline-flex; align-items: center; justify-content: center; min-width: 2.4rem; height: 2.4rem; padding: 0 0.3rem; box-sizing: border-box; border: 1.5px solid var(--g-grey-300); border-radius: var(--g-radius-sm); background: var(--g-white); font-weight: 700; font-size: 0.9rem; }
.g-scale__opt:hover span { border-color: var(--g-black); }
.g-scale__opt input:focus-visible + span { outline: 3px solid var(--g-yellow); outline-offset: 1px; }
.g-scale__opt input:checked + span { background: var(--g-black); border-color: var(--g-black); color: var(--g-white); }
.g-scale--small .g-scale__opt span { min-width: 2.1rem; height: 2.1rem; font-size: 0.85rem; }
.g-form .g-scale--small legend { font-weight: 500; font-size: 0.85rem; }
/* The 0-10 scale is as wide as its buttons, so the two end labels sit under 0 and 10. */
.g-scale__box { width: fit-content; max-width: 100%; }
.g-scale__ends { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.3rem; font-size: 0.7rem; color: var(--g-grey-500); }
.g-npsdone { grid-column: 1 / -1; }
.g-nps { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.8rem; height: 1.8rem; border-radius: 50%; font-weight: 800; font-size: 0.85rem; }
.g-nps--promoter { background: var(--rating-good-bg); color: var(--rating-good); border: 1.5px solid var(--rating-good-line); }
.g-nps--passive { background: var(--g-grey-50); color: var(--g-grey-700); border: 1.5px solid var(--g-grey-300); }
.g-nps--detractor { background: var(--rating-poor-bg); color: var(--rating-poor); border: 1.5px solid var(--rating-poor-line); }
.g-nps-answer { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.8rem; line-height: 1.4; padding: 0.2rem 0; }
.g-nps-answer__comment { color: var(--g-grey-700); font-style: italic; }