/* ==========================================================================
   Instant Feedback - product-specific components, on top of the shared
   Superboard system in kfeedback.css. Only tokens are used for colour, so
   light and dark both work with no per-component dark rules.
   ========================================================================== */

:root {
  /* Survey / publication lifecycle. Always printed as a word as well. */
  --state-draft: #d97706;
  --state-published: #16a34a;
  --state-retired: #878d9e;
  --state-contradicted: #dc2626;
  --state-bad: #dc2626;
  --state-warn: #d97706;
  --state-ok: #16a34a;
}

/* Status badge: a dot AND the word. */
.state {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted);
}
.state::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint);
}
.state--draft::before { background: var(--state-draft); }
.state--published::before { background: var(--state-published); }
.state--retired::before { background: var(--state-retired); }
.state--active::before { background: var(--state-published); }
.state--planned::before { background: var(--state-draft); }

/* Toasts */
.toasts {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 50;
  display: flex; flex-direction: column; gap: 0.5rem; max-width: min(92vw, 380px);
}
.toast {
  padding: 0.65rem 0.9rem; border-radius: var(--radius); font-size: var(--text-sm);
  background: var(--text); color: var(--bg); box-shadow: var(--shadow);
}
.toast--bad { background: var(--state-bad); color: #fff; }

/* Stat tiles on Home */
.stats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
/* SmartVMS KPI tile: small uppercase label on top, big bold figure, quiet note beneath. */
.stat { display: flex; flex-direction: column; gap: 0.3rem; }
.stat__l { order: -1; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
           color: var(--text); }
.stat__n { font-family: var(--font-serif); font-size: 30px; font-weight: 700; line-height: 1.1; }

/* Tables */
table.data { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
table.data th {
  text-align: left; font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-faint); font-weight: 700;
  padding: 0.6rem 1.2rem; border-bottom: 1px solid var(--border);
}
table.data td { padding: 0.75rem 1.2rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.data tr:last-child td { border-bottom: none; }
table.data td a { font-weight: 600; text-decoration: none; }
table.data td a:hover { text-decoration: underline; }

/* Segmented control (mode, orientation, background) */
/* The outline is an overlay, not a border: a border on a clipping container can lose its
   right-hand edge when a neighbour overflows it; an overlay always draws all four sides. */
.seg { position: relative; display: inline-flex; max-width: 100%; border-radius: var(--radius);
       overflow: hidden; background: var(--surface); }
.seg::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--border-strong);
              border-radius: inherit; pointer-events: none; }
.rail > .seg, .builder__preview > .seg { display: flex; width: 100%; }
.rail > .seg button, .builder__preview > .seg button { flex: 1 1 0; min-width: 0; justify-content: center; }
.seg button {
  border: none; background: none; color: var(--text-muted); font: inherit;
  font-size: var(--text-sm); padding: 0.4rem 0.8rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.seg button + button { border-left: 1px solid var(--border-strong); }
.seg button[aria-pressed='true'] { background: var(--brand-600); color: #fff; font-weight: 600; }
.seg button:hover:not([aria-pressed='true']) { color: var(--text); background: var(--surface-2); }

/* ── The builder ───────────────────────────────────────────────────────────
   Three columns: the question list, the editor, the live preview. The preview
   is sticky so it stays in view while a long editor scrolls. */
.builder {
  display: grid; gap: 1.25rem; align-items: start;
  grid-template-columns: 250px minmax(0, 1fr) minmax(320px, 440px);
}
@media (max-width: 1280px) { .builder { grid-template-columns: 230px minmax(0, 1fr); }
                             .builder__preview { grid-column: 1 / -1; position: static !important; } }
@media (max-width: 800px)  { .builder { grid-template-columns: 1fr; } }
.builder__preview { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }

.qlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.qitem {
  display: flex; align-items: center; gap: 0.5rem; width: 100%;
  padding: 0.65rem 0.9rem; border: none; border-bottom: 1px solid var(--border);
  background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.qitem:last-child { border-bottom: none; }
.qitem:hover { background: var(--surface-2); }
.qitem[aria-current='true'] { background: var(--brand-100); box-shadow: inset 3px 0 0 var(--brand-600); }
.qitem__n { color: var(--text-faint); font-size: var(--text-xs); font-weight: 700; min-width: 1.2rem; }
.qitem__t { flex: 1; min-width: 0; font-size: var(--text-sm); overflow: hidden;
            text-overflow: ellipsis; white-space: nowrap; }
.qitem__t--empty { color: var(--text-faint); font-style: italic; }
.qitem__flag { font-size: var(--text-xs); font-weight: 700; padding: 0 0.35rem; border-radius: 999px; }
.qitem__flag--bad { color: var(--state-bad); background: color-mix(in srgb, var(--state-bad) 12%, transparent); }
.qitem__flag--warn { color: var(--state-warn); background: color-mix(in srgb, var(--state-warn) 14%, transparent); }

.fieldrow { display: flex; flex-direction: column; gap: 0.25rem; }
.fieldrow .issue { font-size: 12.5px; margin-top: 0.15rem; }
.issue--error { color: var(--state-bad); }
.issue--warning { color: var(--state-warn); }
.issue::before { font-weight: 700; margin-right: 0.35rem; }
.issue--error::before { content: 'Error:'; }
.issue--warning::before { content: 'Note:'; }

.opt {
  display: grid; gap: 0.5rem; align-items: center;
  grid-template-columns: 1.4rem minmax(0, 1fr) auto auto auto;
  padding: 0.5rem 0; border-bottom: 1px dashed var(--border);
}
.opt:last-child { border-bottom: none; }
.opt__n { color: var(--text-faint); font-size: var(--text-xs); font-weight: 700; }
.opt__extras { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; grid-column: 2 / -1; }
.opt__extras .field { width: auto; }
.opt__extras label { font-size: 12.5px; color: var(--text-muted); display: inline-flex; gap: 0.3rem; align-items: center; }
.opt__id { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); }

.checkrow { display: inline-flex; gap: 0.5rem; align-items: center; font-size: var(--text-sm); }
.checkrow input { width: 18px; height: 18px; accent-color: var(--brand-600); }

.issues { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.issues li { font-size: var(--text-sm); display: flex; gap: 0.5rem; }

.dropzone { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 14px; padding: 14px;
  position: relative; text-align: left; cursor: pointer;
  border: 2px dashed var(--border-strong); border-radius: 12px; background: var(--surface, transparent);
  transition: border-color .15s, background-color .15s; }
.dropzone:hover, .dropzone:focus-within, .dropzone.is-over { border-color: var(--accent, currentColor); }
.dropzone.is-over { background: color-mix(in srgb, var(--accent, currentColor) 8%, transparent); }
.dropzone input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.dropzone:focus-within { outline: 2px solid var(--accent, currentColor); outline-offset: 2px; }
.dropzone[aria-disabled=true] { opacity: .55; cursor: not-allowed; }
.dropzone .logo-thumb { width: 96px; height: 56px; flex: none; display: grid; place-items: center;
  border-radius: 8px; overflow: hidden; background: repeating-conic-gradient(#8883 0 25%, transparent 0 50%) 0 0 / 14px 14px; }
.dropzone .logo-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dropzone .btn { align-self: flex-start; }

.swatch { width: 100%; height: 38px; padding: 2px; border: 1px solid var(--border-strong);
          border-radius: var(--radius); background: var(--surface); cursor: pointer; }

dialog {
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  background: var(--surface); color: var(--text); padding: 1.25rem;
  width: min(92vw, 460px); box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
dialog::backdrop { background: rgba(10, 12, 18, 0.55); }

.log { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted);
       max-height: 7.5rem; overflow: auto; margin: 0; padding-left: 0; list-style-position: inside; }


/* ── Reports ─────────────────────────────────────────────────────────────── */
.filters { flex-wrap: wrap; gap: 0.5rem; }
.bar { display: grid; grid-template-columns: minmax(6rem, 14rem) 1fr auto; gap: 0.75rem; align-items: center; }
.bar__label { font-size: var(--text-sm); }
.bar__track { height: 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.bar__fill { display: block; height: 100%; background: var(--chart-1); border-radius: 6px; min-width: 2px; }
.bar__value { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
@media (max-width: 560px) { .bar { grid-template-columns: 1fr auto; } .bar__track { grid-column: 1 / -1; order: 3; } }

.chart { width: 100%; height: auto; max-height: 220px; }
.chart__axis { stroke: var(--border-strong); stroke-width: 1; }
.chart__bar { fill: var(--chart-1); }
.chart__grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 3; }
.chart__text { fill: var(--text-faint); font-size: 10px; font-family: var(--font); }

.hm { border-collapse: separate; border-spacing: 2px; font-size: 11px; width: 100%; min-width: 640px; }
.hm__h { color: var(--text-faint); font-weight: 600; text-align: center; }
.hm__d { color: var(--text-muted); text-align: right; padding-right: 0.5rem; font-weight: 600; }
.hm__c { height: 22px; text-align: center; border-radius: 3px; color: var(--text);
         background: color-mix(in srgb, var(--chart-1) calc(var(--v) * 85%), var(--surface-2)); }
.hm__c[style*='--v:0.'] { }

@media print {
  .header, .sitefoot, .noprint, .filters { display: none !important; }
  .page { padding: 0; max-width: none; }
  .card { box-shadow: none; break-inside: avoid; }
  body { background: #fff; }
}


/* ── Contextual help ("?" beside a field) ─────────────────────────────────── */
.labelwrap { display: flex; align-items: center; gap: 0.2rem; margin-bottom: 0.25rem; }
.labelwrap > .label { margin: 0; }
.labelwrap > .checkrow { margin: 0; }
.headwrap { display: inline-flex; align-items: center; gap: 0.25rem; }
.helpbtn {
  width: 24px; height: 24px; padding: 0; flex: 0 0 auto;      /* WCAG 2.2 minimum target size */
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%; background: transparent; color: var(--text-muted); cursor: pointer;
}
.helpbtn:hover { color: var(--brand-ink); background: var(--brand-100); }
.helpdlg { width: min(94vw, 520px); }
.help__tip {
  padding: 0.7rem 0.85rem; border-radius: var(--radius); font-size: var(--text-sm);
  background: var(--brand-100); color: var(--text); border: 1px solid var(--border);
}

/* Licence notice under the copyright line: on its own line, as in the sibling products. */
.sitefoot__legal { flex-basis: 100%; margin: 0; }

/* Chart card titles, as in SmartVMS: small, uppercase, tracked. */
.ctitle { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }

/* Donut with centre total and a legend that prints every value (colour is never the only carrier). */
.donut { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; }
.donut__svg { width: 190px; height: 190px; flex: none; }
.donut__seg { fill: none; stroke-width: 28; }
.donut__total { font: 700 30px var(--font); fill: var(--text); }
.donut__sub { font: 600 11px var(--font); fill: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; flex: 1 1 14rem; min-width: 0; max-width: 26rem; }
.legend li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto; gap: 0.6rem; align-items: center; font-size: var(--text-sm); }
.legend__sw { width: 12px; height: 12px; border-radius: 3px; }
.legend__n { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.legend__pct { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 3.4em; text-align: right; }

/* Header tools: the bell and cog sit beside the avatar and share the icon-button look. */
.header__tools a.iconbtn { text-decoration: none; }
.header__tools a.iconbtn[aria-current='page'] { color: var(--brand-ink); border-color: var(--brand-600); }
.header__tools .dot { background: var(--brand-600); }

/* "Survey settings" in the builder: a tile, not a list row, so the survey-wide choices are seen first. */
.qitem--settings { padding: 0.8rem 0.9rem; background: var(--brand-100); border-bottom: 1px solid var(--border-strong); }
.qitem--settings:hover { background: color-mix(in srgb, var(--brand-100) 70%, var(--surface)); }
.qitem--settings[aria-current='true'] { background: var(--brand-600); color: #fff; box-shadow: none; }
.qitem--settings[aria-current='true'] .muted { color: rgba(255, 255, 255, 0.85); }
.qitem__badge { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center;
                background: var(--surface); color: var(--brand-ink); }
.qitem--settings[aria-current='true'] .qitem__badge { background: rgba(255, 255, 255, 0.18); color: #fff; }
.qitem__stack { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }

/* Multi-select filter dropdown (checkboxes in a panel). */
.multi { position: relative; }
.multi__summary { cursor: pointer; list-style: none; width: auto; max-width: 18rem; white-space: nowrap;
                  overflow: hidden; text-overflow: ellipsis; }
.multi__summary::-webkit-details-marker { display: none; }
.multi__summary::after { content: '▾'; margin-left: 0.5rem; color: var(--text-faint); }
.multi__panel { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 16rem; max-width: 24rem;
                max-height: 18rem; overflow: auto; padding: 0.5rem; background: var(--surface);
                border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow); }
.multi__item { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.4rem; border-radius: 6px; cursor: pointer;
               font-size: var(--text-sm); }
.multi__item:hover { background: var(--surface-2); }

/* Comparison bars: one row per group. */
.stackedbars { display: grid; gap: 0.6rem; }
.stackedbar { display: grid; grid-template-columns: minmax(7rem, 14rem) 1fr auto; gap: 0.75rem; align-items: center; }
.stackedbar__label { font-size: var(--text-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stackedbar__track { display: flex; height: 26px; border-radius: 6px; overflow: hidden; background: var(--surface-2);
                     border: 1px solid var(--border); }
.stackedbar__seg { display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; min-width: 0; overflow: hidden; }
.stackedbar__n { font-size: var(--text-xs); color: var(--text-muted); }
.legend--row { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; max-width: none; }
.legend--row li { display: inline-flex; gap: 0.4rem; }
@media (max-width: 560px) { .stackedbar { grid-template-columns: 1fr auto; } .stackedbar__track { grid-column: 1 / -1; order: 3; } }

/* ── Home dashboard ─────────────────────────────────────────────────────── */
.dash__head { align-items: flex-end; flex-wrap: wrap; gap: 0.75rem 1rem; }
.dash__head h1 { margin-bottom: 0.15rem; }
.dash__grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .dash__grid { grid-template-columns: 1fr; } }
a.kpi { text-decoration: none; color: inherit; transition: box-shadow .15s, border-color .15s, transform .15s; }
a.kpi:hover { border-color: var(--brand-600); box-shadow: var(--shadow); transform: translateY(-1px); }
.delta { font-size: var(--text-sm); font-weight: 700; }
.delta--good { color: var(--good); }
.delta--bad { color: var(--bad); }
.delta--none { color: var(--text-muted); font-weight: 600; }
.delta__basis { font-weight: 500; color: var(--text-faint); }
.journey { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.journey li { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.75rem; border: 1px solid var(--border);
              border-radius: var(--radius); }
.journey li > :nth-child(2) { flex: 1; }
.journey__tick { width: 1.4rem; text-align: center; color: var(--text-faint); font-weight: 700; }
.journey__done { background: var(--surface-2); }
.journey__done .journey__tick { color: var(--good); }
.attention { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }

/* Branded confirm and prompt dialogs, centred on screen. */
dialog.confirm { width: min(30rem, calc(100vw - 2rem)); padding: 1.4rem 1.5rem; border: 1px solid var(--border);
                 border-radius: var(--radius-lg); background: var(--surface); color: var(--text); box-shadow: 0 18px 50px rgba(8, 25, 35, 0.28);
                 margin: auto; }
dialog.confirm h2 { font-size: var(--text-xl); }
.btn--dangerfill { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn--dangerfill:hover { filter: brightness(0.92); }

/* Platform administration: the organisation switcher and the support-session banner. */
.tenantswitch { display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid var(--border-strong); border-radius: var(--radius);
                background: var(--surface); color: var(--text); padding: 0.25rem 0.6rem; font: inherit; cursor: pointer; }
.tenantswitch:hover { border-color: var(--brand-600); }
.tenantpanel { min-width: 18rem; max-width: 24rem; padding: 0.4rem; left: 12.5rem; right: auto; }
@media (max-width: 900px) { .tenantpanel { left: 1rem; } }
.tenantpanel .field { margin: 0.25rem 0 0.4rem; }
.tenantlist { max-height: 18rem; overflow: auto; display: grid; gap: 0.1rem; }
.tenantitem { display: flex; flex-direction: column; gap: 0.1rem; align-items: flex-start; width: 100%; text-align: left; border: none;
              background: none; padding: 0.5rem 0.7rem; border-radius: var(--radius); cursor: pointer; font: inherit; color: var(--text); }
.tenantitem:hover:not(:disabled) { background: var(--surface-2); }
.tenantitem.is-current { background: var(--brand-100); cursor: default; }
.platformbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0.5rem 1.5rem;
               background: color-mix(in srgb, var(--chart-3) 24%, var(--surface)); border-bottom: 1px solid var(--chart-3);
               color: var(--text); font-size: var(--text-sm); }

/* ── Sign-in page (SmartVMS look): blue hero on the left, white card on the right ─────────── */
.login-body { background: #2f3f8a; }
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center;
         gap: 4rem; padding: 3rem clamp(1.5rem, 7vw, 8rem) 4.5rem; position: relative; color: #fff;
         background: radial-gradient(120% 90% at 85% 10%, #4768b6 0%, transparent 55%), linear-gradient(135deg, #2f3b85 0%, #3a5aa5 60%, #4466b0 100%); }
.login__eyebrow { color: #ffb8de; font-size: 12.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 1.4rem; }
.login__hero h1 { color: #fff; font-size: clamp(40px, 5vw, 64px); line-height: 1.05; margin: 0 0 1.3rem; }
.login__lead { font-size: 18px; line-height: 1.55; max-width: 36rem; margin: 0 0 2rem; color: rgba(255, 255, 255, 0.94); }
.login__features { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; max-width: 36rem; }
.login__feature { display: flex; gap: 1rem; align-items: flex-start; }
.login__feature strong { font-size: 18px; }
.login__feature p { margin: 0.1rem 0 0; font-size: 14.5px; color: rgba(255, 255, 255, 0.88); line-height: 1.45; }
.login__fico { width: 52px; height: 52px; flex: none; border-radius: 14px; display: grid; place-items: center; color: #fff; }
.login__fico--blue { background: #2d52a0; } .login__fico--red { background: #ee4b4b; }
.login__fico--pink { background: #f48fb1; } .login__fico--green { background: #5cb85c; }

.login__card { --text: #12202b; --text-muted: #4f5f6b; --text-faint: #5a6a76; --surface: #fff; --surface-2: #f6f8fb; --border: #dde5ea;
               --border-strong: #c3cfdb; background: #fff; color: var(--text); border-radius: 24px; padding: 2.6rem clamp(1.5rem, 4vw, 3.3rem) 2.4rem;
               box-shadow: 0 30px 70px rgba(10, 20, 60, 0.35); max-width: 34rem; width: 100%; justify-self: center; }
.login__mark { display: grid; place-items: center; margin-bottom: 1.2rem; }
.login__card h2 { text-align: center; font-size: 30px; margin: 0 0 0.4rem; color: #12202b; }
.login__sub { text-align: center; color: var(--text-muted); font-size: 16px; margin: 0 0 1.4rem; }
.login__rule { border: none; border-top: 1px solid var(--border); margin: 0 0 1.4rem; }
.login__input { height: 48px; font-size: 16px; border-radius: 10px; }
.login__btn { height: 52px; border: none; border-radius: 12px; background: #2b57a0; color: #fff; font: inherit; font-weight: 700; font-size: 16.5px; cursor: pointer; width: 100%; }
.login__btn:hover:not(:disabled) { background: #234a8a; }
.login__btn:disabled { opacity: 0.7; cursor: wait; }
.login__btn:focus-visible, .login__link:focus-visible { outline: 3px solid #9bb7ec; outline-offset: 2px; }
.login__link { background: none; border: none; color: #2b57a0; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; padding: 0.3rem; text-decoration: underline; text-underline-offset: 3px; }
.login__note { display: flex; gap: 0.7rem; align-items: center; margin-top: 1.4rem; padding: 0.9rem 1rem; border-radius: 12px; background: #eaf0fb;
               border: 1px solid #d5e0f5; color: #2b57a0; font-size: 14.5px; line-height: 1.4; }
.login__ok { padding: 0.7rem 0.9rem; border-radius: 10px; background: #e6f6ee; color: #14633d; border: 1px solid #b9e3cd; font-size: 14.5px; }
.login__foot { position: absolute; right: clamp(1.5rem, 7vw, 8rem); bottom: 1.4rem; margin: 0; font-size: 13.5px; color: rgba(255, 255, 255, 0.9); }
@media (max-width: 960px) {
  .login { grid-template-columns: 1fr; gap: 2rem; padding-bottom: 5rem; }
  .login__features { display: none; }
  .login__hero h1 { margin-bottom: 0.6rem; }
  .login__lead { margin-bottom: 0; }
  .login__foot { left: 1.5rem; right: 1.5rem; text-align: center; }
}

/* Survey languages: chips, and the original-beside-translation table. */
.langchips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.3rem; }
.langchip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.65rem; border: 1px solid var(--border-strong);
            border-radius: 999px; background: var(--surface); font-size: var(--text-sm); }
.langchip--default { background: var(--brand-100); border-color: var(--brand-600); }
.langchip__x { display: inline-grid; place-items: center; width: 20px; height: 20px; border: none; border-radius: 50%; background: transparent;
               color: var(--text-muted); cursor: pointer; }
.langchip__x:hover { background: var(--surface-2); color: var(--bad); }
.flag { border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); vertical-align: middle; flex: none; }
.flagchip { display: inline-grid; place-items: center; min-width: 30px; height: 20px; border-radius: 3px; background: var(--brand-600); color: #fff;
            font-size: 11px; font-weight: 700; letter-spacing: 0.04em; vertical-align: middle; }
.trtable { display: grid; gap: 0.6rem; }
.trrow { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 0.9rem; padding: 0.6rem; border: 1px solid var(--border);
         border-radius: var(--radius); }
.trrow--missing { border-color: var(--chart-3); background: color-mix(in srgb, var(--chart-3) 7%, var(--surface)); }
.trrow__src { font-size: var(--text-sm); }
@media (max-width: 760px) { .trrow { grid-template-columns: 1fr; } }

/* ── Reports, SmartVMS layout ──────────────────────────────────────────────── */
.rhead { display: flex; align-items: center; gap: 1rem 1.4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.rtitle { font-size: 30px; line-height: 1.1; margin: 0; font-weight: 800; letter-spacing: -0.02em; }
.rsub { margin: 0.2rem 0 0; color: var(--text-muted); font-size: 15px; }
.rctl { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.6rem 0.9rem; background: var(--surface);
        border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-sm); }
.rctl__title { font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; color: var(--text-muted); }
.rctl .field { width: auto; height: 40px; padding: 0 0.7rem; }
.rctl__apply { height: 40px; padding: 0 1.2rem; border: none; border-radius: 10px; background: var(--brand-600); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.rctl__apply:disabled { background: #e6eaf0; color: #7b8896; cursor: default; }
.rctl__range { font-weight: 700; font-size: 14.5px; margin: 0 0.3rem; white-space: nowrap; }
.rctl__reset { height: 28px; padding: 0 0.7rem; border: none; border-radius: 6px; background: #eef1f5; color: #6b7886; font: inherit; font-weight: 700;
               font-size: 11.5px; letter-spacing: 0.06em; cursor: pointer; }
.btn--teal { white-space: nowrap; flex: none; line-height: 1; background: var(--brand-600); border-color: var(--brand-600); color: #fff; font-weight: 700; display: inline-flex; align-items: center; gap: 0.5rem;
             height: 48px; padding: 0 1.4rem; text-decoration: none; border-radius: 12px; }
.btn--teal:hover { filter: brightness(1.1); }
.rtools { margin: 0 0 0.6rem; }
.rtools__label { font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; color: var(--text-muted); }

.kpi2row { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.kpi2 { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 0.95rem 1rem 0.8rem; display: flex; flex-direction: column;
        gap: 0.25rem; box-shadow: var(--shadow-sm); }
.kpi2__top { display: flex; align-items: flex-start; gap: 0.6rem; }
.kpi2__ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: #eaf0f4; color: var(--brand-600); }
.kpi2__ico--star { background: #efe9fb; color: #6b4fb8; }
.kpi2__label { flex: 1; font-size: 13px; font-weight: 800; letter-spacing: 0.03em; line-height: 1.2; padding-top: 2px; }
.infoi { display: inline-grid; place-items: center; width: 17px; height: 17px; flex: none; border: 1px solid #b9c4cf; border-radius: 50%; color: #6b7886;
         font: italic 700 11px Georgia, serif; cursor: help; }
.infoi:hover, .infoi:focus-visible { border-color: var(--brand-600); color: var(--brand-600); }
.kpi2__value { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin: 0.1rem 0 0.2rem; }
.kpi2__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; font-size: 13px; color: var(--text-muted); }
.kpi2__prev { font-size: 12.5px; }
.kpi2__sub { font-size: 12.5px; color: var(--text-faint); }
.kpi2 .delta { font-size: 13px; white-space: nowrap; }

.gauge { display: grid; grid-template-columns: minmax(230px, auto) minmax(220px, 1fr) minmax(200px, auto); gap: 1.4rem; align-items: center; padding: 0.9rem 1.2rem; }
.gauge__id { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.gauge__value { font-size: 34px; font-weight: 800; line-height: 1.05; }
.gauge__pill { padding: 0.25rem 0.7rem; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.gauge__pill--strong { background: #dff3e8; color: #14633d; } .gauge__pill--mixed { background: #fdf0d0; color: #7a5200; } .gauge__pill--weak { background: #fbe0de; color: #8f2a26; }
.gauge__bar { position: relative; display: flex; height: 16px; border-radius: 8px; margin: 1.4rem 0 1.4rem; }
.gauge__seg { display: block; height: 100%; }
.gauge__seg--red { background: #e9675f; border-radius: 8px 0 0 8px; } .gauge__seg--amber { background: #f2a81d; } .gauge__seg--green { background: #1f9d73; border-radius: 0 8px 8px 0; }
.gauge__marker { position: absolute; top: -8px; bottom: -8px; width: 2px; background: var(--text); transform: translateX(-1px); z-index: 1; }
.gauge__marker b { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 12.5px; }
.gauge__ticks { position: absolute; left: 0; right: 0; top: 20px; display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); font-weight: 600; }
.gauge__ticks span:nth-child(2) { margin-left: 24%; } .gauge__ticks span:nth-child(3) { margin-right: 2%; }
.gauge__cmp { text-align: right; font-size: 13.5px; color: var(--text-muted); display: grid; gap: 0.2rem; }
@media (max-width: 980px) { .gauge { grid-template-columns: 1fr; } .gauge__cmp { text-align: left; } }

.rgrid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.rgrid2 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr)); align-items: start; }
@media (max-width: 980px) { .rgrid { grid-template-columns: 1fr; } }

/* Language pickers: in the account menu, and on the sign-in page. */
.langpick { display: grid; grid-template-columns: 1fr 1fr; gap: 0.2rem; padding: 0.2rem 0.4rem 0.4rem; }
.langpick__btn { display: flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.5rem; border: 1px solid transparent; border-radius: 8px; background: none;
                 font: inherit; font-size: var(--text-sm); color: var(--text); cursor: pointer; text-align: left; }
.langpick__btn:hover { background: var(--surface-2); }
.langpick__btn[aria-pressed='true'] { border-color: var(--brand-600); background: var(--brand-100); font-weight: 700; }
.login__langs { position: absolute; top: 1.2rem; right: clamp(1.5rem, 7vw, 8rem); display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end; max-width: 80vw; z-index: 2; }
.login__lang { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px;
               background: rgba(255, 255, 255, 0.1); color: #fff; font: inherit; font-size: 13px; cursor: pointer; }
.login__lang:hover { background: rgba(255, 255, 255, 0.2); }
.login__lang[aria-pressed='true'] { background: #fff; color: #2b57a0; font-weight: 700; }

/* Reports header on one row where there is room, and seven KPI cards across a wide screen. */
@media (min-width: 1280px) {
  .rhead { flex-wrap: nowrap; }
  .rctl { flex-wrap: nowrap; gap: 0.45rem; padding: 0.5rem 0.7rem; }
  .rctl .rctl__select { width: 9.5rem; }
  .rctl .rctl__date { width: 9rem; padding: 0 0.4rem; }
  .rctl__range { font-size: 13.5px; }
  .rhead__title { flex: 0 1 auto; }
}
.kpi2row { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }

/* Language pickers are one button that expands to a list of flags (sign-in page and account menu). */
.login__langs { display: block; }
.login__langs > summary { list-style: none; cursor: pointer; }
.login__langs > summary::-webkit-details-marker { display: none; }
.login__langlist { position: absolute; right: 0; top: calc(100% + 0.4rem); display: grid; gap: 0.25rem; padding: 0.4rem; background: #fff; border-radius: 14px;
                   box-shadow: 0 18px 40px rgba(10, 20, 60, 0.35); min-width: 12rem; }
.login__langlist .login__lang { color: #12202b; background: transparent; border-color: transparent; justify-content: flex-start; }
.login__langlist .login__lang:hover { background: #eef2fa; }
.login__langlist .login__lang[aria-pressed='true'] { background: #e3ecff; color: #2b57a0; }
.langdrop > summary { list-style: none; display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.7rem; cursor: pointer; font-size: var(--text-sm); }
.langdrop > summary::-webkit-details-marker { display: none; }
.langdrop[open] > summary { font-weight: 700; }

/* ── Rules: list cards and the canvas ─────────────────────────────────────── */
.page.page--wide { max-width: 1700px; }
.tplgrid { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.tplcard { display: flex; flex-direction: column; gap: 0.3rem; text-align: left; padding: 0.8rem 0.9rem; border: 1px solid var(--border-strong); border-radius: 12px;
           background: var(--surface); font: inherit; color: var(--text); cursor: pointer; }
.tplcard:hover, .tplcard:focus-visible { border-color: var(--brand-600); box-shadow: var(--shadow); }
.rc__top { margin: 0 0 0.8rem; flex-wrap: wrap; gap: 0.6rem; }
.rc__name { width: min(26rem, 100%); font-weight: 700; font-size: var(--text-lg); }
.rc { display: grid; gap: 0.9rem; grid-template-columns: 220px minmax(0, 1fr) 350px; align-items: start; margin-bottom: 0.9rem; }
@media (max-width: 1100px) { .rc { grid-template-columns: 1fr; } }
.rc__palette { gap: 0.6rem; }
.rcpal { padding: 0.6rem 0.7rem; border: 1px solid var(--border-strong); border-left-width: 5px; border-radius: 10px; background: var(--surface); cursor: grab; display: grid; gap: 0.2rem; }
.rcpal--trigger { border-left-color: var(--chart-1); } .rcpal--condition { border-left-color: var(--chart-3); } .rcpal--action { border-left-color: var(--chart-2); }
.rc__stage { position: relative; height: 640px; overflow: auto; border: 1px solid var(--border); border-radius: 14px; background-color: var(--surface);
             background-image: radial-gradient(circle, #cdd6dd 1px, transparent 1.2px); background-size: 22px 22px; }
.rc__stage:focus-visible { outline: 3px solid var(--brand-600); outline-offset: 2px; }
.rc__world { position: relative; width: 2200px; height: 1200px; }
.rc__edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.rcedge { fill: none; stroke: #5f7480; stroke-width: 2.4; color: #5f7480; }
.rcedge--yes { stroke: var(--good); color: var(--good); } .rcedge--no { stroke: var(--bad); color: var(--bad); }
.rcedge--temp { stroke-dasharray: 6 5; } .rcedge.is-selected { stroke-width: 4; }
.rcedge__hit { fill: none; stroke: transparent; stroke-width: 16; pointer-events: stroke; cursor: pointer; }
.rcnode { position: absolute; width: 250px; background: var(--surface); border: 2px solid var(--border-strong); border-left-width: 6px; border-radius: 14px;
          box-shadow: var(--shadow-sm); user-select: none; touch-action: none; }
.rcnode--trigger { border-left-color: var(--chart-1); } .rcnode--condition { border-left-color: var(--chart-3); } .rcnode--action { border-left-color: var(--chart-2); }
.rcnode.is-selected { border-color: var(--brand-600); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-600) 22%, transparent); z-index: 2; }
.rcnode.is-bad { border-color: var(--bad); }
.rcnode:focus-visible { outline: 3px solid var(--brand-600); outline-offset: 3px; }
.rcnode__head { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--border); cursor: grab; font-weight: 700; font-size: var(--text-sm); }
.rcnode__title { flex: 1; min-width: 0; }
.rcnode__del { display: grid; place-items: center; width: 22px; height: 22px; border: none; border-radius: 6px; background: none; color: var(--text-muted); cursor: pointer; }
.rcnode__del:hover { background: var(--surface-2); color: var(--bad); }
.rcnode__body { padding: 0.55rem 0.7rem 0.7rem; font-size: 13px; color: var(--text-muted); line-height: 1.4; min-height: 3.2rem; overflow-wrap: anywhere; }
.rcport { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 3px solid var(--brand-600); }
.rcport--in { left: -12px; top: 18px; } .rcport--out { cursor: crosshair; }
.rcport--out:hover { background: var(--brand-600); }
.rcouts { position: absolute; right: -2px; top: 10px; display: grid; gap: 1.4rem; }
.rcout { position: relative; height: 16px; display: flex; align-items: center; justify-content: flex-end; }
.rcout .rcport--out { right: -10px; top: 0; }
.rcout__label { margin-right: 20px; background: var(--surface); padding: 0 3px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.rcout__label--yes { color: var(--good); } .rcout__label--no { color: var(--bad); }
.rcnode--condition .rcnode__body { padding-bottom: 2.6rem; }
.rc__inspector { max-height: 640px; overflow: auto; }
.checklist { display: grid; gap: 0.25rem; }
.phchips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.phchip { padding: 0.15rem 0.5rem; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface-2); font: 12px var(--font-mono); cursor: pointer; }
.phchip:hover { border-color: var(--brand-600); }
.hint--bad { color: var(--bad); }
.stack--tight { gap: 0.3rem; }

/* Removing estate: the two choices, and the archived list. */
.rmchoice { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.7rem 0.8rem; border: 1px solid var(--border-strong); border-radius: 12px; cursor: pointer; }
.rmchoice:has(input:checked) { border-color: var(--brand-600); background: var(--brand-100); }
.rmchoice input { margin-top: 0.25rem; }
.archived__head { padding: 0.9rem 1.2rem; cursor: pointer; font-weight: 700; }