/* KRAGOS Compliance shared component mechanics. Variants theme these through the variables
   below and add their own layout; they should not need to fork the mechanics. */
:root {
  --kc-ink: #2B2B2B; --kc-ink-2: #4A4642; --kc-muted: #6F675E; --kc-surface: #EDEAE4; --kc-panel: #F6F4F0;
  --kc-line: rgba(43,43,43,.16); --kc-accent: #B87333; --kc-accent-ink: #9B5810; --kc-on-accent: #1A1612;
  --kc-wa: #25D366; --kc-on-wa: #0B1F12; --kc-radius: 4px;
}

/* Contact actions: header, footer, service pages */
.kc-contact { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kc-act { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: var(--kc-radius); border: 1px solid var(--kc-line); color: var(--kc-ink); text-decoration: none; font-size: 14.5px; font-weight: 500; white-space: nowrap; background: transparent; }
.kc-act:hover { border-color: var(--kc-accent); }
.kc-act svg, .kc-act img { width: 18px; height: 18px; flex: none; }
.kc-act--wa { background: var(--kc-wa); border-color: var(--kc-wa); color: var(--kc-on-wa); }
.kc-act--wa:hover { filter: brightness(.95); border-color: var(--kc-wa); }
.kc-act--primary { background: var(--kc-accent); border-color: var(--kc-accent); color: var(--kc-on-accent); }

/* Floating WhatsApp (desktop and tablet); the mobile bar replaces it under 720px */
.kc-wa-float { position: fixed; right: 24px; bottom: 24px; z-index: 50; display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 20px 0 16px; border-radius: 28px; background: var(--kc-wa); color: var(--kc-on-wa); font-weight: 600; font-size: 15px; text-decoration: none; box-shadow: 0 6px 20px rgba(0,0,0,.22); }
.kc-wa-float img { width: 26px; height: 26px; }
.kc-mbar { display: none; }
@media (max-width: 720px) {
  .kc-wa-float { display: none; }
  .kc-mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: repeat(3, 1fr); background: #1A1612; border-top: 1px solid rgba(237,234,228,.18); padding-bottom: env(safe-area-inset-bottom); }
  .kc-mbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 60px; color: #EDEAE4; text-decoration: none; font-size: 13px; font-weight: 500; }
  .kc-mbar a + a { border-left: 1px solid rgba(237,234,228,.12); }
  .kc-mbar a.is-wa { background: var(--kc-wa); color: var(--kc-on-wa); }
  .kc-mbar img, .kc-mbar svg { width: 22px; height: 22px; }
  body.kc-has-mbar { padding-bottom: 64px; }
}

/* Marked-empty photo slot: FPH supplies real photography. Never filled with stock or generated people. */
.kc-photo-slot { position: relative; display: flex; align-items: flex-end; min-height: 260px; border: 1px dashed var(--kc-muted); border-radius: var(--kc-radius); background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(122,114,104,.08) 14px 15px); color: var(--kc-muted); font-size: 13px; padding: 14px 16px; }
.kc-photo-slot::before { content: "Photo slot"; position: absolute; top: 14px; left: 16px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }

/* Evidence chain diagram */
[data-kc-chain] [data-input] { opacity: 0; transform: translateX(-12px); transition: opacity .5s ease, transform .5s ease, background-color .25s ease, border-color .25s ease, color .25s ease; }
[data-kc-chain] .kc-link { transform: scaleX(0); transform-origin: left center; transition: transform .7s ease .35s; }
[data-kc-chain] [data-regime] { opacity: 0; transform: translateX(12px); transition: opacity .5s ease .55s, transform .5s ease .55s, background-color .2s, border-color .2s, color .2s; cursor: pointer; font: inherit; text-align: left; }
[data-kc-chain].is-live [data-input], [data-kc-chain].is-live [data-regime] { opacity: 1; transform: none; }
[data-kc-chain].is-live .kc-link { transform: scaleX(1); }
[data-kc-chain].is-live [data-input]:nth-child(2) { transition-delay: .06s; }
[data-kc-chain].is-live [data-input]:nth-child(3) { transition-delay: .12s; }
[data-kc-chain].is-live [data-input]:nth-child(4) { transition-delay: .18s; }
[data-kc-chain].is-live [data-input]:nth-child(5) { transition-delay: .24s; }
[data-kc-chain].is-live [data-input]:nth-child(6) { transition-delay: .30s; }
[data-kc-chain] [data-input].is-fed { border-color: var(--kc-accent); color: var(--kc-ink); }
[data-kc-chain] [data-regime][aria-pressed="true"] { border-color: var(--kc-accent); }

/* Scorecard estimate */
[data-kc-score] input[type=range] { width: 100%; accent-color: var(--kc-accent); height: 28px; }
[data-kc-score] [data-row] .kc-track { position: relative; height: 6px; background: var(--kc-line); border-radius: 3px; overflow: hidden; }
[data-kc-score] [data-fill] { position: absolute; inset: 0 auto 0 0; background: var(--kc-accent); border-radius: 3px; }
[data-kc-score] [data-row].is-below [data-fill] { background: var(--kc-muted); }
[data-kc-score] [data-out=band] { display: block; height: 100%; background: var(--kc-accent); transition: width .25s ease; }
[data-kc-score] .kc-route { display: inline-flex; border: 1px solid var(--kc-line); border-radius: var(--kc-radius); overflow: hidden; }
[data-kc-score] .kc-route label { position: relative; padding: 8px 16px; cursor: pointer; font-size: 14px; font-weight: 500; }
[data-kc-score] .kc-route input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
[data-kc-score] .kc-route label:has(input:checked) { background: var(--kc-ink); color: var(--kc-surface); }
[data-kc-score] .kc-route label:has(input:focus-visible) { outline: 2px solid var(--kc-accent); outline-offset: -2px; }

/* Can you bid? */
[data-kc-bid] .kc-yn { display: inline-flex; gap: 6px; flex: none; }
[data-kc-bid] .kc-yn label { position: relative; padding: 6px 12px; border: 1px solid var(--kc-line); border-radius: 999px; font-size: 13.5px; cursor: pointer; white-space: nowrap; }
[data-kc-bid] .kc-yn input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
[data-kc-bid] .kc-yn label:has(input:checked) { background: var(--kc-ink); border-color: var(--kc-ink); color: var(--kc-surface); }
[data-kc-bid] .kc-yn label:has(input:focus-visible) { outline: 2px solid var(--kc-accent); outline-offset: 2px; }
[data-kc-bid] [data-q].is-open .kc-qtext { color: var(--kc-accent-ink); }
[data-kc-bid] .kc-meter { height: 6px; background: var(--kc-line); border-radius: 3px; overflow: hidden; }
[data-kc-bid] [data-out=meter] { display: block; height: 100%; width: 0; background: var(--kc-accent); transition: width .25s ease; }

/* Deadline timeline */
[data-kc-timeline] .kc-tl-scroll { position: relative; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
[data-kc-timeline] .kc-tl { position: relative; min-width: 880px; }
[data-kc-timeline] .kc-tl-months { display: grid; grid-template-columns: repeat(12, 1fr); }
[data-kc-timeline] .kc-tl-months > * { scroll-snap-align: start; }
[data-kc-timeline] [data-deadline] { cursor: pointer; font: inherit; text-align: left; }
[data-kc-timeline] [data-today] { position: absolute; top: 0; bottom: 0; left: var(--pos, 0); width: 0; border-left: 1px dashed var(--kc-accent); pointer-events: none; }
[data-kc-timeline] [data-today]::after { content: attr(data-label); position: absolute; top: -22px; left: 6px; font-size: 11.5px; white-space: nowrap; color: var(--kc-accent); font-weight: 600; }

/* Bars */
[data-kc-bars] { position: relative; }
[data-kc-bars] [data-value] { cursor: default; }
[data-kc-bars] [data-bar] { display: block; height: 100%; width: 0; border-radius: 0 4px 4px 0; background: var(--kc-accent); transition: width .9s ease; }
[data-kc-bars].is-live [data-bar] { width: var(--w); }
.kc-tip { position: absolute; z-index: 5; padding: 6px 10px; border-radius: 4px; background: #1A1612; color: #EDEAE4; font-size: 13px; white-space: nowrap; pointer-events: none; box-shadow: 0 4px 14px rgba(0,0,0,.25); }

@media (prefers-reduced-motion: reduce) {
  [data-kc-chain] *, [data-kc-bars] [data-bar], [data-kc-score] *, [data-kc-bid] * { transition: none !important; }
}