/* Bay Kinetic component styles. Every value here resolves to a token. */

/* ---- Button ---- */
.bk-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-display);font-weight:var(--fw-bold);letter-spacing:.01em;border:var(--border-width-strong) solid transparent;border-radius:var(--radius-button);cursor:pointer;text-decoration:none;transition:var(--transition-control);white-space:nowrap}
.bk-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.bk-btn:active:not(:disabled){transform:translateY(1px)}
.bk-btn:disabled,.bk-btn[aria-disabled="true"]{opacity:.42;cursor:not-allowed;transform:none}
.bk-btn--sm{height:34px;padding:0 var(--space-4);font-size:13px}
.bk-btn--md{height:44px;padding:0 var(--space-6);font-size:15px}
.bk-btn--lg{height:54px;padding:0 var(--space-7);font-size:17px}
.bk-btn--block{width:100%}
.bk-btn--primary{background:var(--accent-primary);border-color:var(--accent-primary);color:var(--accent-contrast)}
.bk-btn--primary:hover:not(:disabled){background:var(--accent-primary-hover);border-color:var(--accent-primary-hover);color:var(--bk-white)}
.bk-btn--primary:active:not(:disabled){background:var(--accent-primary-press);border-color:var(--accent-primary-press)}
.bk-btn--secondary{background:transparent;border-color:var(--accent-primary);color:var(--bk-leaf-800)}
.bk-btn--secondary:hover:not(:disabled){background:var(--accent-primary);border-color:var(--accent-primary);color:var(--accent-contrast)}
.bk-btn--outlineDark{background:transparent;border-color:var(--bk-graphite-700);color:var(--bk-graphite-900)}
.bk-btn--outlineDark:hover:not(:disabled){background:var(--bk-graphite-900);border-color:var(--bk-graphite-900);color:var(--bk-white)}
.bk-btn--ghost{background:transparent;border-color:transparent;color:var(--bk-graphite-700)}
.bk-btn--ghost:hover:not(:disabled){background:var(--bk-graphite-100);color:var(--bk-graphite-900)}
.bk-btn--dark{background:var(--bk-graphite-900);border-color:var(--bk-graphite-900);color:var(--bk-white)}
.bk-btn--dark:hover:not(:disabled){background:var(--bk-graphite-700);border-color:var(--bk-graphite-700)}
.bk-btn--onDark{background:var(--bk-white);border-color:var(--bk-white);color:var(--bk-graphite-900)}
.bk-btn--onDark:hover:not(:disabled){background:var(--accent-primary);border-color:var(--accent-primary)}
.bk-btn--danger{background:var(--bk-violation);border-color:var(--bk-violation);color:var(--bk-white)}
.bk-btn--danger:hover:not(:disabled){background:#a53426;border-color:#a53426}

/* ---- IconButton ---- */
.bk-iconbtn{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-control);border:var(--border-width) solid transparent;background:transparent;color:var(--bk-graphite-600);cursor:pointer;transition:var(--transition-control)}
.bk-iconbtn--sm{width:32px;height:32px}
.bk-iconbtn--md{width:40px;height:40px}
.bk-iconbtn--lg{width:48px;height:48px}
.bk-iconbtn:hover:not(:disabled){background:var(--bk-graphite-100);color:var(--bk-graphite-900)}
.bk-iconbtn:active:not(:disabled){transform:translateY(1px)}
.bk-iconbtn:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.bk-iconbtn--outline{border-color:var(--border-hairline);background:var(--surface-card)}
.bk-iconbtn--solid{background:var(--accent-primary);color:var(--accent-contrast)}
.bk-iconbtn--solid:hover:not(:disabled){background:var(--accent-primary-hover);color:var(--bk-white)}
.bk-iconbtn:disabled{opacity:.4;cursor:not-allowed}

/* ---- IconBadge: solid leaf circle, white glyph (bayke.com feature icons) ---- */
.bk-iconbadge{display:inline-flex;align-items:center;justify-content:center;flex:none;border-radius:var(--radius-pill);background:var(--accent-primary);color:var(--bk-white)}
.bk-iconbadge--sm{width:44px;height:44px}
.bk-iconbadge--md{width:60px;height:60px}
.bk-iconbadge--lg{width:84px;height:84px}
.bk-iconbadge--soft{background:var(--bk-leaf-100);color:var(--bk-leaf-700)}
.bk-iconbadge--dark{background:var(--bk-graphite-900);color:var(--accent-primary)}

/* ---- Card ---- */
.bk-card{background:var(--surface-card);border:var(--border-width) solid var(--border-hairline);border-radius:var(--radius-card);box-shadow:var(--shadow-1);transition:box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard)}
.bk-card--flat{box-shadow:none}
.bk-card--raised{box-shadow:var(--shadow-3);border-color:transparent}
.bk-card--dark{background:var(--surface-dark);border-color:rgba(255,255,255,.1);color:var(--bk-graphite-200)}
.bk-card--brand{background:var(--surface-brand-soft);border-color:var(--bk-leaf-200)}
.bk-card--pad-sm{padding:var(--space-4)}
.bk-card--pad-md{padding:var(--space-6)}
.bk-card--pad-lg{padding:var(--space-7)}
.bk-card--pad-none{padding:0}
.bk-card--interactive{cursor:pointer}
.bk-card--interactive:hover{box-shadow:var(--shadow-3);transform:translateY(-2px);border-color:var(--bk-leaf-300)}
.bk-card__title{font-family:var(--font-display);font-size:var(--type-h4-size);line-height:var(--type-h4-lh);font-weight:var(--fw-bold);color:var(--text-strong)}
.bk-card__body{margin-top:var(--space-2);font-size:var(--type-body-sm-size);line-height:var(--type-body-sm-lh);color:var(--text-muted)}

/* ---- Badge (status) ---- */
.bk-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:var(--radius-pill);border:var(--border-width) solid transparent;white-space:nowrap}
.bk-badge__dot{width:6px;height:6px;border-radius:var(--radius-pill);background:currentColor}
.bk-badge--neutral{background:var(--bk-graphite-100);color:var(--bk-graphite-600)}
.bk-badge--brand{background:var(--bk-leaf-100);color:var(--bk-leaf-800)}
.bk-badge--compliant{background:var(--bk-compliant-soft);color:var(--bk-compliant)}
.bk-badge--attention{background:var(--bk-attention-soft);color:#8a6210}
.bk-badge--violation{background:var(--bk-violation-soft);color:var(--bk-violation)}
.bk-badge--info{background:var(--bk-info-soft);color:var(--bk-info)}
.bk-badge--solid{background:var(--accent-primary);color:var(--accent-contrast)}

/* ---- Tag (mono data chip) ---- */
.bk-tag{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-mono);font-size:var(--type-mono-sm-size);line-height:1;color:var(--bk-graphite-700);background:var(--bk-graphite-050);border:var(--border-width) solid var(--border-hairline);border-radius:var(--radius-xs);padding:6px 8px}
.bk-tag--brand{background:var(--bk-leaf-050);border-color:var(--bk-leaf-200);color:var(--bk-leaf-800)}
.bk-tag__remove{border:0;background:none;padding:0;cursor:pointer;color:var(--text-faint);line-height:1;font-size:14px}
.bk-tag__remove:hover{color:var(--bk-violation)}

/* ---- Stat ---- */
.bk-stat__value{font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--type-metric-size);line-height:var(--type-metric-lh);letter-spacing:var(--type-metric-ls);color:var(--text-strong)}
.bk-stat__value--brand{color:var(--bk-leaf-600)}
.bk-stat--onDark .bk-stat__value{color:var(--bk-white)}
.bk-stat--onDark .bk-stat__label{color:var(--bk-graphite-300)}
.bk-stat__unit{font-size:.45em;font-weight:var(--fw-bold);margin-left:.18em;letter-spacing:0}
.bk-stat__label{margin-top:var(--space-2);font-family:var(--font-display);font-size:var(--type-eyebrow-size);letter-spacing:var(--type-eyebrow-ls);text-transform:uppercase;font-weight:var(--fw-semibold);color:var(--text-muted)}
.bk-stat__note{margin-top:var(--space-1);font-size:var(--type-caption-size);color:var(--text-faint)}

/* ---- Field / Input / Select / Textarea ---- */
.bk-field{display:flex;flex-direction:column;gap:6px}
.bk-field__label{font-family:var(--font-display);font-size:var(--type-label-size);letter-spacing:var(--type-label-ls);font-weight:var(--fw-semibold);color:var(--text-strong)}
.bk-field__req{color:var(--bk-violation);margin-left:3px}
.bk-field__hint{font-size:var(--type-caption-size);color:var(--text-muted)}
.bk-field__error{font-size:var(--type-caption-size);color:var(--bk-violation);font-weight:var(--fw-semibold)}
.bk-input{font-family:var(--font-body);font-size:15px;color:var(--text-strong);background:var(--surface-card);border:var(--border-width) solid var(--border-default);border-radius:var(--radius-control);padding:0 var(--space-3);height:44px;width:100%;box-sizing:border-box;transition:var(--transition-control)}
.bk-input--mono{font-family:var(--font-mono);letter-spacing:var(--type-mono-ls)}
.bk-input::placeholder{color:var(--text-faint)}
.bk-input:hover:not(:disabled){border-color:var(--bk-graphite-400)}
.bk-input:focus{outline:none;border-color:var(--accent-primary);box-shadow:var(--shadow-focus)}
.bk-input:disabled{background:var(--bk-graphite-050);color:var(--text-faint);cursor:not-allowed}
.bk-input--invalid{border-color:var(--bk-violation)}
.bk-input--invalid:focus{box-shadow:0 0 0 3px rgba(194,64,47,.28)}
.bk-input--textarea{height:auto;min-height:104px;padding:var(--space-3);line-height:1.5;resize:vertical}
.bk-select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--bk-graphite-600) 50%),linear-gradient(135deg,var(--bk-graphite-600) 50%,transparent 50%);background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:var(--space-8)}

/* ---- Checkbox / Radio / Switch ---- */
.bk-choice{display:inline-flex;align-items:flex-start;gap:var(--space-3);cursor:pointer;font-size:var(--type-body-sm-size);color:var(--text-body)}
.bk-choice input{position:absolute;opacity:0;width:0;height:0}
.bk-choice__box{flex:none;width:20px;height:20px;margin-top:1px;border:var(--border-width-strong) solid var(--border-default);background:var(--surface-card);border-radius:var(--radius-xs);display:flex;align-items:center;justify-content:center;transition:var(--transition-control)}
.bk-choice__box--radio{border-radius:var(--radius-pill)}
.bk-choice:hover .bk-choice__box{border-color:var(--bk-graphite-500)}
.bk-choice input:checked+.bk-choice__box{background:var(--accent-primary);border-color:var(--accent-primary)}
.bk-choice input:focus-visible+.bk-choice__box{box-shadow:var(--shadow-focus)}
.bk-choice__mark{width:11px;height:11px;color:var(--bk-graphite-900);opacity:0;transition:opacity var(--dur-fast) var(--ease-standard)}
.bk-choice input:checked+.bk-choice__box .bk-choice__mark{opacity:1}
.bk-choice__dot{width:8px;height:8px;border-radius:var(--radius-pill);background:var(--bk-graphite-900);transform:scale(0);transition:transform var(--dur-fast) var(--ease-out)}
.bk-choice input:checked+.bk-choice__box .bk-choice__dot{transform:scale(1)}
.bk-choice--disabled{opacity:.45;cursor:not-allowed}
.bk-switch{display:inline-flex;align-items:center;gap:var(--space-3);cursor:pointer;font-size:var(--type-body-sm-size);color:var(--text-body)}
.bk-switch input{position:absolute;opacity:0;width:0;height:0}
.bk-switch__track{position:relative;flex:none;width:46px;height:26px;border-radius:var(--radius-pill);background:var(--bk-graphite-300);transition:background-color var(--dur-base) var(--ease-standard)}
.bk-switch__thumb{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:var(--radius-pill);background:var(--bk-white);box-shadow:var(--shadow-2);transition:transform var(--dur-base) var(--ease-out)}
.bk-switch input:checked+.bk-switch__track{background:var(--accent-primary)}
.bk-switch input:checked+.bk-switch__track .bk-switch__thumb{transform:translateX(20px)}
.bk-switch input:focus-visible+.bk-switch__track{box-shadow:var(--shadow-focus)}
.bk-switch--disabled{opacity:.45;cursor:not-allowed}

/* ---- Alert ---- */
.bk-alert{display:flex;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-md);border:var(--border-width) solid transparent;font-size:var(--type-body-sm-size);line-height:var(--type-body-sm-lh)}
.bk-alert__icon{flex:none;margin-top:1px}
.bk-alert__title{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:15px;color:var(--text-strong);margin-bottom:2px}
.bk-alert--info{background:var(--bk-info-soft);border-color:#c9dde7;color:#26576f}
.bk-alert--success{background:var(--bk-compliant-soft);border-color:#bfe1cb;color:#20663a}
.bk-alert--warning{background:var(--bk-attention-soft);border-color:#f0dcaa;color:#7a5610}
.bk-alert--danger{background:var(--bk-violation-soft);border-color:#f0c8c1;color:#963223}
.bk-alert__close{margin-left:auto;background:none;border:0;cursor:pointer;color:inherit;opacity:.6;font-size:16px;line-height:1}
.bk-alert__close:hover{opacity:1}

/* ---- Tooltip ---- */
.bk-tooltip{position:relative;display:inline-flex}
.bk-tooltip__bubble{position:absolute;z-index:40;background:var(--bk-graphite-900);color:var(--bk-white);font-size:var(--type-caption-size);line-height:1.4;padding:7px 10px;border-radius:var(--radius-sm);box-shadow:var(--shadow-3);white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(3px);transition:opacity var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-out)}
.bk-tooltip__bubble--visible{opacity:1;transform:translateY(0)}
.bk-tooltip__bubble--top{bottom:calc(100% + 8px);left:50%;margin-left:-50%;transform-origin:bottom}
.bk-tooltip__bubble--bottom{top:calc(100% + 8px);left:50%}
.bk-tooltip__bubble--right{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}

/* ---- Dialog ---- */
.bk-dialog__scrim{position:fixed;inset:0;background:rgba(33,33,35,.55);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:var(--space-6);z-index:80;animation:bk-fade var(--dur-base) var(--ease-standard)}
.bk-dialog{background:var(--surface-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-4);width:100%;max-width:520px;overflow:hidden;animation:bk-rise var(--dur-base) var(--ease-out)}
.bk-dialog__head{display:flex;align-items:flex-start;gap:var(--space-4);padding:var(--space-6) var(--space-6) var(--space-3)}
.bk-dialog__title{font-family:var(--font-display);font-size:var(--type-h3-size);line-height:var(--type-h3-lh);font-weight:var(--fw-bold);color:var(--text-strong)}
.bk-dialog__body{padding:0 var(--space-6) var(--space-6);font-size:var(--type-body-sm-size);color:var(--text-muted)}
.bk-dialog__foot{display:flex;justify-content:flex-end;gap:var(--space-3);padding:var(--space-4) var(--space-6);background:var(--surface-sunken);border-top:var(--border-width) solid var(--border-hairline)}
@keyframes bk-fade{from{opacity:0}to{opacity:1}}
@keyframes bk-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---- Tabs ---- */
.bk-tabs{display:flex;gap:var(--space-6);border-bottom:var(--border-width) solid var(--border-hairline)}
.bk-tabs__tab{position:relative;background:none;border:0;padding:0 0 var(--space-3);cursor:pointer;font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:15px;color:var(--text-muted);transition:color var(--dur-fast) var(--ease-standard)}
.bk-tabs__tab:hover{color:var(--text-strong)}
.bk-tabs__tab--active{color:var(--text-strong)}
.bk-tabs__tab--active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--accent-primary);border-radius:var(--radius-pill)}
.bk-tabs--pill{border-bottom:0;gap:var(--space-1);background:var(--bk-graphite-100);padding:4px;border-radius:var(--radius-pill);display:inline-flex}
.bk-tabs--pill .bk-tabs__tab{padding:8px 16px;border-radius:var(--radius-pill)}
.bk-tabs--pill .bk-tabs__tab--active{background:var(--surface-card);box-shadow:var(--shadow-1)}
.bk-tabs--pill .bk-tabs__tab--active::after{display:none}

/* ---- ProgressMeter ---- */
.bk-meter__head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.bk-meter__label{font-family:var(--font-display);font-size:var(--type-label-size);letter-spacing:var(--type-label-ls);font-weight:var(--fw-semibold);color:var(--text-strong)}
.bk-meter__value{font-family:var(--font-mono);font-size:var(--type-mono-sm-size);color:var(--text-muted)}
.bk-meter__track{height:8px;border-radius:var(--radius-pill);background:var(--bk-graphite-100);overflow:hidden}
.bk-meter__fill{height:100%;border-radius:var(--radius-pill);background:var(--accent-primary);transition:width var(--dur-slow) var(--ease-out)}
.bk-meter__fill--compliant{background:var(--bk-compliant)}
.bk-meter__fill--attention{background:var(--bk-attention)}
.bk-meter__fill--violation{background:var(--bk-violation)}

/* ---- DataTable ---- */
.bk-table{width:100%;border-collapse:collapse;font-size:var(--type-body-sm-size)}
.bk-table th{text-align:left;font-family:var(--font-display);font-size:var(--type-eyebrow-size);letter-spacing:var(--type-eyebrow-ls);text-transform:uppercase;font-weight:var(--fw-semibold);color:var(--text-muted);padding:var(--space-3) var(--space-4);border-bottom:var(--border-width-strong) solid var(--border-hairline);white-space:nowrap}
.bk-table td{padding:var(--space-3) var(--space-4);border-bottom:var(--border-width) solid var(--border-hairline);color:var(--text-body);vertical-align:middle}
.bk-table tbody tr{transition:background-color var(--dur-fast) var(--ease-standard)}
.bk-table tbody tr:hover{background:var(--bk-leaf-050)}
.bk-table--zebra tbody tr:nth-child(even){background:var(--bk-graphite-050)}
.bk-table--zebra tbody tr:hover{background:var(--bk-leaf-050)}
.bk-table__mono{font-family:var(--font-mono);font-size:var(--type-mono-sm-size);color:var(--text-muted)}
.bk-table__num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ---- Eyebrow / SectionHeading ---- */
.bk-eyebrow{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-display);font-size:var(--type-eyebrow-size);line-height:var(--type-eyebrow-lh);letter-spacing:var(--type-eyebrow-ls);text-transform:uppercase;font-weight:var(--fw-bold);color:var(--bk-leaf-700)}
.bk-eyebrow::before{content:"";width:22px;height:2px;background:var(--accent-primary)}
.bk-eyebrow--onDark{color:var(--accent-primary)}
.bk-eyebrow--plain::before{display:none}

/* ---- Logo lockup ---- */
/* Size with --bk-logo-h (on the wrapper or inline). Wrapper and image both read it, so
   non-React consumers can size the lockup without an inline height on the <img>.
   Replaces "img{height:100%}", which beat width/height attributes. Child theme note §5, 27 Sep 2026. */
.bk-logo{--bk-logo-h:40px;display:inline-flex;align-items:center;gap:calc(var(--bk-logo-h) * .22);height:var(--bk-logo-h);border:0}
.bk-logo img{height:var(--bk-logo-h);width:auto;display:block}

/* ---- Section bands (upstreamed from the child theme, Sep 2026) ----
   The whole background vocabulary: white, sunken, dark. No fourth band. */
.bk-section{padding-block:var(--section-y)}
.bk-section--tight{padding-block:var(--section-y-tight)}
.bk-section--sunken{background:var(--surface-sunken)}
.bk-section--dark{background:var(--surface-dark);color:var(--bk-graphite-200)}
/* Explicit stack: photo 0 · scrim 1 · copy 2. Only the CONTENT wrapper is lifted —
   never "> *", which would also lift a child <img> (as in a WordPress cover block)
   above the scrim. Use .bk-hero-scrim__content on the copy wrapper; the WP cover
   inner container is matched too. Fix reported by the child theme, 27 Sep 2026. */
.bk-hero-scrim{position:relative;isolation:isolate}
.bk-hero-scrim::before{content:"";position:absolute;inset:0;background:var(--scrim-left);z-index:1;pointer-events:none}
.bk-hero-scrim__content,.bk-hero-scrim>.wp-block-cover__inner-container{position:relative;z-index:2}
@media (max-width:921px){.bk-section{padding-block:var(--section-y-tight)}}