/* ============================================================
   Strategy Engine v2 (page-blackjack-basic-strategy-engine.php)
   Consumes tokens.css; chrome comes from chrome-legacy.css.
   Prefix: .bse-
   ============================================================ */


/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--bji-font-sans);
  font-size: var(--bji-text-base);
  line-height: var(--bji-leading-body);
  color: var(--bji-text);
  background: var(--bji-surface-sunken);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--bji-link); }
a:hover { color: var(--bji-link-hover); }

/* container: uses the shared .cv2-container from chrome-legacy.css */

/* ============ hero ============ */
.bse-hero {
  background:
    radial-gradient(90rem 30rem at 85% -20%, rgb(6 152 255 / 0.25), transparent 60%),
    linear-gradient(160deg, var(--bji-navy-900), var(--bji-navy-800) 70%);
  color: var(--bji-text-inverse);
  padding: var(--bji-space-6) 0 var(--bji-space-7);
}
.bse-hero .crumbs {
  font-size: var(--bji-text-xs);
  color: var(--bji-text-inverse-muted);
  margin-bottom: var(--bji-space-4);
}
.bse-hero .crumbs a { color: var(--bji-text-inverse-muted); text-decoration: none; }
.bse-hero .crumbs a:hover { color: #fff; }
.bse-hero h1 {
  font-size: var(--bji-text-3xl);
  font-weight: var(--bji-weight-black);
  line-height: var(--bji-leading-tight);
  margin: 0 0 var(--bji-space-3);
  max-width: 44rem;
}
.bse-hero .tagline {
  font-size: var(--bji-text-lg);
  color: var(--bji-text-inverse-muted);
  margin: 0;
  max-width: 44rem;
}
.bse-hero .byline {
  display: flex;
  align-items: center;
  gap: var(--bji-space-2);
  margin: var(--bji-space-4) 0 0;
  font-size: var(--bji-text-sm);
  color: var(--bji-text-inverse-muted);
}
.bse-hero .byline img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgb(255 255 255 / 0.3);
}
.bse-hero .byline a {
  color: #fff;
  font-weight: var(--bji-weight-semibold);
  text-decoration: none;
  border-bottom: 1px solid rgb(255 255 255 / 0.35);
}
.bse-hero .byline a:hover { border-bottom-color: #fff; color: #fff; }
.bse-hero .trust {
  margin: var(--bji-space-2) 0 0;
  font-size: var(--bji-text-xs);
  color: var(--bji-text-inverse-muted);
}
.bse-hero .trust b { color: #fff; font-weight: var(--bji-weight-semibold); }

/* ============ engine panel ============ */
.bse-engine {
  margin-top: calc(-1 * var(--bji-space-6));
  padding-bottom: var(--bji-section-gap);
}
.bse-panel {
  background: var(--bji-surface);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-lg);
  box-shadow: var(--bji-shadow-md);
  overflow: hidden;
}

/* rules toolbar */
.bse-toolbar {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--bji-space-3) var(--bji-space-4);
  padding: var(--bji-space-5);
  border-bottom: 1px solid var(--bji-border);
  background: var(--bji-surface-sunken);
}
@media (max-width: 1000px) { .bse-toolbar { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .bse-toolbar { grid-template-columns: repeat(2, 1fr); } }
.bse-field label {
  display: block;
  font-size: var(--bji-text-xs);
  font-weight: var(--bji-weight-semibold);
  color: var(--bji-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--bji-space-1);
}
.bse-field select,
.bse-lookup-row select {
  width: 100%;
  font: inherit;
  font-size: var(--bji-text-sm);
  font-weight: var(--bji-weight-medium);
  color: var(--bji-text);
  padding: 9px 30px 9px 12px;
  border: 1px solid var(--bji-border-strong);
  border-radius: var(--bji-radius-sm);
  background: var(--bji-surface)
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" fill="none" stroke="%235c6279" stroke-width="1.6" stroke-linecap="round"/></svg>')
    no-repeat right 12px center;
  appearance: none;
  cursor: pointer;
}
.bse-field select:focus-visible,
.bse-lookup-row select:focus-visible {
  outline: 2px solid var(--bji-blue-500);
  outline-offset: 1px;
}

/* Chart vocabulary (status strip, charts, grid, action colors, legend)
   moved to css/bse-charts.css, SHARED with the live-blackjack-game v2
   pages. This file keeps only the engine's additions on top of it. */

/* engine cells are interactive (click-to-explain) */
.bse-grid td {
  cursor: pointer;
  transition: filter var(--bji-duration-fast) var(--bji-ease);
}
.bse-grid td:hover { filter: brightness(1.12); }
.bse-grid td.is-sel { outline: 2px solid var(--bji-navy-900); outline-offset: 1px; }
.bse-grid td:focus-visible { outline: 2px solid var(--bji-navy-900); outline-offset: 1px; }

/* engine-only rows of the 560px compact block (chart rules live in
   bse-charts.css) */
@media (max-width: 560px) {
  .bse-lookup { padding-inline: var(--bji-space-3); }
  .bse-toolbar { padding-inline: var(--bji-space-3); }
}

/* actions row */
.bse-actions { margin-left: auto; display: flex; gap: var(--bji-space-2); }
@media (max-width: 700px) { .bse-actions { margin-left: 0; } }
.bse-btn {
  font: inherit;
  font-size: var(--bji-text-sm);
  font-weight: var(--bji-weight-semibold);
  color: var(--bji-navy-800);
  background: var(--bji-surface);
  border: 1px solid var(--bji-border-strong);
  border-radius: var(--bji-radius-pill);
  padding: 7px 16px;
  cursor: pointer;
}
.bse-btn:hover { border-color: var(--bji-blue-500); color: var(--bji-blue-600); }

/* dark-charts toggle: sun / moon switch */
.bse-switch {
  position: relative;
  width: 58px;
  height: 30px;
  flex: none;
  align-self: center;
  border-radius: var(--bji-radius-pill);
  border: 1px solid var(--bji-border-strong);
  background: var(--bji-gray-200);
  padding: 0;
  cursor: pointer;
  margin-right: var(--bji-space-2);
  transition: background var(--bji-duration) var(--bji-ease);
}
.bse-switch .knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--bji-shadow-sm);
  transition: left var(--bji-duration) var(--bji-ease);
  z-index: 1;
}
.bse-switch svg {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  z-index: 2;
  transition: color var(--bji-duration) var(--bji-ease);
}
.bse-switch .sun { left: 7px; color: var(--bji-amber-500); }
.bse-switch .moon { right: 7px; color: var(--bji-gray-400); }
.bse-switch[aria-checked="true"] {
  background: var(--bji-navy-950);
  border-color: var(--bji-navy-700);
}
.bse-switch[aria-checked="true"] .knob { left: 31px; }
.bse-switch[aria-checked="true"] .sun { color: var(--bji-gray-500); }
.bse-switch[aria-checked="true"] .moon { color: var(--bji-navy-800); }
.bse-switch:focus-visible { outline: 2px solid var(--bji-blue-500); outline-offset: 2px; }

/* ---- check one hand (lookup) ---- */
.bse-lookup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bji-space-3);
  padding: var(--bji-space-4) var(--bji-space-5) 0;
}
.bse-lookup-label {
  font-size: var(--bji-text-xs);
  font-weight: var(--bji-weight-bold);
  color: var(--bji-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bse-lookup-row {
  display: flex;
  align-items: center;
  gap: var(--bji-space-2);
  flex-wrap: wrap;
}
.bse-lookup-row .sep { font-size: var(--bji-text-sm); color: var(--bji-text-faint); }
.bse-lookup-row select { width: auto; }
.bse-lookup-verdict {
  flex-basis: 100%;
  background: var(--bji-surface-sunken);
  border: 1px solid var(--bji-border);
  border-left: 3px solid var(--bji-blue-500);
  border-radius: var(--bji-radius-sm);
  padding: var(--bji-space-3) var(--bji-space-4);
  font-size: var(--bji-text-sm);
  line-height: var(--bji-leading-snug);
}
.bse-lookup-verdict .act {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bji-space-2);
  margin-bottom: var(--bji-space-2);
}
.bse-lookup-verdict .act i {
  font-style: normal;
  font-size: 0.72rem;
  font-weight: var(--bji-weight-bold);
  color: #fff;
  border-radius: 4px;
  min-width: 30px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}
.bse-lookup-verdict .act b { font-size: var(--bji-text-base); }
.bse-lookup-verdict .act .hand { color: var(--bji-text-faint); }
.bse-lookup-verdict p { margin: 0 0 var(--bji-space-2); color: var(--bji-text-muted); }
.bse-lookup-verdict p:last-child { margin-bottom: 0; }
.bse-grid td.is-lu { outline: 2px dashed var(--bji-navy-900); outline-offset: 1px; }

/* ============ explainer popover ============ */
.bse-pop {
  position: absolute;
  z-index: 60;
  background: var(--bji-surface);
  border: 1px solid var(--bji-border-strong);
  border-radius: var(--bji-radius-md);
  box-shadow: var(--bji-shadow-lg);
  padding: var(--bji-space-4);
  font-size: var(--bji-text-sm);
  line-height: var(--bji-leading-snug);
}
.bse-pop .x {
  position: absolute;
  top: 8px; right: 8px;
  border: 0; background: none; cursor: pointer;
  color: var(--bji-text-faint);
  font-size: 0.85rem;
  padding: 4px;
}
.bse-pop .x:hover { color: var(--bji-text); }
.bse-pop .head {
  font-weight: var(--bji-weight-bold);
  padding-right: 24px;
  margin-bottom: var(--bji-space-1);
}
.bse-pop .act {
  display: inline-flex;
  align-items: center;
  gap: var(--bji-space-2);
  font-weight: var(--bji-weight-semibold);
  font-size: var(--bji-text-xs);
  color: var(--bji-text-muted);
  margin-bottom: var(--bji-space-3);
}
.bse-pop .act i {
  font-style: normal;
  font-size: 0.68rem;
  font-weight: var(--bji-weight-bold);
  color: #fff;
  border-radius: 4px;
  min-width: 26px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.bse-pop p { margin: 0 0 var(--bji-space-2); color: var(--bji-text-muted); }
.bse-pop p:last-child { margin-bottom: 0; }
.bse-pop .notes-head,
.bse-lookup-verdict .notes-head {
  margin-top: var(--bji-space-3);
  font-size: 0.62rem;
  font-weight: var(--bji-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bji-text-faint);
}
.bse-pop ul.notes,
.bse-lookup-verdict ul.notes {
  margin: var(--bji-space-1) 0 0;
  padding-left: 1.1em;
  font-size: var(--bji-text-xs);
  color: var(--bji-text-muted);
}
.bse-pop ul.notes li,
.bse-lookup-verdict ul.notes li { margin-bottom: 2px; }

/* ============ dark charts theme ============ */
.bse-panel.is-dark {
  background: var(--bji-navy-800);
  border-color: var(--bji-navy-700);
  color: var(--bji-text-inverse);
}
.bse-panel.is-dark .bse-toolbar {
  background: var(--bji-navy-900);
  border-color: var(--bji-navy-700);
}
.bse-panel.is-dark .bse-field label { color: var(--bji-text-inverse-muted); }
.bse-panel.is-dark .bse-field select,
.bse-panel.is-dark .bse-lookup-row select {
  color: var(--bji-text-inverse);
  border-color: var(--bji-navy-700);
  background-color: var(--bji-navy-800);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" fill="none" stroke="%23aab6cf" stroke-width="1.6" stroke-linecap="round"/></svg>');
}
.bse-panel.is-dark .bse-summary span {
  color: var(--bji-text-inverse);
  background: rgb(6 152 255 / 0.16);
  border-color: rgb(6 152 255 / 0.35);
}
.bse-panel.is-dark .bse-edge .k { color: var(--bji-text-inverse-muted); }
.bse-panel.is-dark .bse-edge .v { color: #fff; }
.bse-panel.is-dark .bse-chart-card h3 { color: #fff; }
.bse-panel.is-dark .bse-grid thead th,
.bse-panel.is-dark .bse-grid tbody th {
  background: var(--bji-navy-700);
  color: var(--bji-text-inverse);
}
.bse-panel.is-dark .bse-grid thead th.corner { background: none; color: var(--bji-text-inverse-muted); }
.bse-panel.is-dark .bse-grid td.is-sel,
.bse-panel.is-dark .bse-grid td:focus-visible { outline-color: #fff; }
.bse-panel.is-dark .bse-lookup-label { color: var(--bji-text-inverse-muted); }
.bse-panel.is-dark .bse-lookup-row .sep { color: var(--bji-text-inverse-muted); }
.bse-panel.is-dark .bse-lookup-verdict {
  background: var(--bji-navy-900);
  border-color: var(--bji-navy-700);
  border-left-color: var(--bji-blue-500);
  color: var(--bji-text-inverse);
}
.bse-panel.is-dark .bse-lookup-verdict p { color: var(--bji-text-inverse-muted); }
.bse-panel.is-dark .bse-lookup-verdict .act .hand { color: var(--bji-text-inverse-muted); }
.bse-panel.is-dark .bse-grid td.is-lu { outline-color: #fff; }
.bse-panel.is-dark .bse-foot {
  background: var(--bji-navy-900);
  border-color: var(--bji-navy-700);
}
.bse-panel.is-dark .bse-key { color: var(--bji-text-inverse-muted); }
.bse-panel.is-dark .bse-btn {
  background: var(--bji-navy-800);
  border-color: var(--bji-navy-700);
  color: var(--bji-text-inverse);
}
.bse-panel.is-dark .bse-btn:hover { border-color: var(--bji-blue-400); color: var(--bji-blue-300); }
.bse-pop.is-dark {
  background: var(--bji-navy-800);
  border-color: var(--bji-navy-700);
  color: var(--bji-text-inverse);
}
.bse-pop.is-dark .head { color: #fff; }
.bse-pop.is-dark p, .bse-pop.is-dark .act, .bse-pop.is-dark ul.notes { color: var(--bji-text-inverse-muted); }
.bse-pop.is-dark .x { color: var(--bji-text-inverse-muted); }
.bse-pop.is-dark .x:hover { color: #fff; }

/* ============ article ============ */
.bse-article { padding-bottom: var(--bji-section-gap); }
.bse-prose {
  max-width: var(--bji-prose-width);
  margin-inline: auto;
  background: var(--bji-surface);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-lg);
  padding: clamp(1.25rem, 1rem + 2vw, 2.5rem);
}
.bse-prose h2 {
  font-size: var(--bji-text-xl);
  font-weight: var(--bji-weight-bold);
  line-height: var(--bji-leading-snug);
  margin: var(--bji-space-6) 0 var(--bji-space-3);
  padding-top: var(--bji-space-4);
  border-top: 1px solid var(--bji-border);
}
.bse-prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.bse-prose h3 {
  font-size: var(--bji-text-base);
  font-weight: var(--bji-weight-bold);
  margin: var(--bji-space-5) 0 var(--bji-space-2);
}
.bse-prose p { margin: 0 0 var(--bji-space-4); }
.bse-prose ul { padding-left: 1.2em; margin: 0 0 var(--bji-space-4); }
.bse-prose li { margin-bottom: var(--bji-space-2); }

/* memorization rule lines */
.bse-rule {
  display: block;
  background: var(--bji-surface-sunken);
  border-left: 3px solid var(--bji-blue-500);
  border-radius: 0 var(--bji-radius-sm) var(--bji-radius-sm) 0;
  padding: var(--bji-space-2) var(--bji-space-3);
  margin: 0 0 var(--bji-space-2);
  font-size: var(--bji-text-sm);
}
.bse-rule b { color: var(--bji-navy-800); }
/* wpautop separates consecutive rule spans with <br>; the spans are block */
.bse-prose .bse-rule + br { display: none; }

/* author / EEAT box */
.bse-author { padding-bottom: var(--bji-section-gap); }
.bse-author-card {
  max-width: var(--bji-prose-width);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: var(--bji-space-5);
  background: var(--bji-surface);
  border: 1px solid var(--bji-border);
  border-left: 4px solid var(--bji-blue-500);
  border-radius: var(--bji-radius-lg);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
}
.bse-author-card .photo {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--bji-blue-100);
}
.bse-author-card .kicker {
  display: block;
  font-size: var(--bji-text-xs);
  font-weight: var(--bji-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bji-blue-600);
  margin-bottom: var(--bji-space-1);
}
.bse-author-card h2 {
  margin: 0 0 var(--bji-space-1);
  font-size: var(--bji-text-xl);
  font-weight: var(--bji-weight-bold);
}
.bse-author-card .role {
  margin: 0 0 var(--bji-space-3);
  font-size: var(--bji-text-sm);
  font-weight: var(--bji-weight-semibold);
  color: var(--bji-text-muted);
}
.bse-author-card .bio { margin: 0 0 var(--bji-space-3); font-size: var(--bji-text-sm); }
.bse-author-card .creds {
  margin: 0 0 var(--bji-space-3);
  padding: 0;
  list-style: none;
  font-size: var(--bji-text-sm);
  color: var(--bji-text-muted);
}
.bse-author-card .creds li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: var(--bji-space-2);
}
.bse-author-card .creds li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--bji-green-500);
  font-weight: var(--bji-weight-bold);
}
.bse-author-card .links { margin: 0; font-size: var(--bji-text-sm); }
@media (max-width: 560px) {
  .bse-author-card { grid-template-columns: 1fr; }
  .bse-author-card .photo { width: 84px; height: 84px; }
}

/* related tools */
.bse-tools h2 {
  font-size: var(--bji-text-2xl);
  font-weight: var(--bji-weight-bold);
  margin: 0 0 var(--bji-space-4);
}
.bse-tools { padding-bottom: var(--bji-section-gap); }
.bse-tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--bji-space-4);
}
.bse-tool-card {
  background: var(--bji-surface);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-md);
  padding: var(--bji-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--bji-space-2);
}
.bse-tool-card .icon { font-size: 1.5rem; line-height: 1; }
.bse-tool-card h3 { margin: 0; font-size: var(--bji-text-base); }
.bse-tool-card h3 a { text-decoration: none; color: var(--bji-navy-800); }
.bse-tool-card h3 a:hover { color: var(--bji-blue-600); }
.bse-tool-card p { margin: 0; font-size: var(--bji-text-sm); color: var(--bji-text-muted); }

/* comments placeholder */
.bse-comments { padding-bottom: var(--bji-section-gap); }
.bse-comments .ph {
  max-width: var(--bji-prose-width);
  margin-inline: auto;
  border: 1px dashed var(--bji-border-strong);
  border-radius: var(--bji-radius-md);
  padding: var(--bji-space-5);
  color: var(--bji-text-muted);
  font-size: var(--bji-text-sm);
  text-align: center;
}

/* ============ print: charts only ============ */
@media print {
  .cv2-nav, .cv2-footer, #to-top, #ask-experts-wrapper, .bse-hero .crumbs, .bse-hero .byline, .bse-toolbar, .bse-actions, .bse-pop, .bse-lookup,
  .bse-article, .bse-author, .bse-tools, .bse-comments, .cv2-comments, #comments, .comments-area, .grecaptcha-badge { display: none !important; }
  body { background: #fff; }
  .bse-hero { background: none; color: #000; padding: 0; }
  .bse-hero .tagline, .bse-hero .trust { display: none; }
  .bse-hero h1 { font-size: 20pt; margin-bottom: 8pt; }
  .bse-engine { margin-top: 0; padding-bottom: 0; }
  .bse-panel { border: 0; box-shadow: none; background: #fff; color: #000; }
  .bse-panel.is-dark .bse-toolbar, .bse-panel.is-dark .bse-foot { background: #fff; }
  /* dark theme prints as the light sheet */
  .bse-panel.is-dark .bse-summary span { color: #000; background: #fff; border-color: #999; }
  .bse-panel.is-dark .bse-edge .k { color: #555; }
  .bse-panel.is-dark .bse-edge .v { color: #000; }
  .bse-panel.is-dark .bse-chart-card h3 { color: #000; }
  .bse-panel.is-dark .bse-key { color: #000; }
  .bse-status { padding: 0 0 8pt; }
  .bse-summary span { color: #000; background: #fff; border-color: #999; }
  .bse-edge .v { color: #000; }
  /* single column: two 430px-min tables cannot share a portrait page */
  .bse-charts { display: block; padding: 0; }
  .bse-chart-card { break-inside: avoid; margin-bottom: 10pt; }
  .bse-chart-card h3 { color: #000; margin-top: 0; }
  .bse-scroll { overflow: visible; }
  .bse-grid { min-width: 0; width: 100%; }
  .bse-grid th, .bse-grid td { height: 20px; font-size: 7.5pt; }
  .bse-grid td.is-sel, .bse-grid td:focus-visible { outline: none; }
  .bse-grid thead th, .bse-grid tbody th { background: #eee !important; color: #000 !important; }
  .bse-foot { background: #fff; border-top: 1px solid #ccc; padding: 6pt 0 0; }
  .bse-key { color: #000; }
  .bse-grid td, .bse-key i, .bse-grid th {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}