/* Market Basket Analysis — tool-local styles.
   The teaching classes (.act-narrative, .concept-card, .callout-box, .chart-explainer)
   are tool-local by house convention; only .interpretation-aid lives in main.css. */

.act-narrative {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--app-text, #1f2a37);
  margin: 0 0 1rem;
}
.act-narrative.small { font-size: 0.9rem; color: var(--app-muted, #5f6b7a); }

.act-num {
  display: inline-block;
  background: var(--app-accent, #2a7de1);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  margin-right: 0.6rem;
  vertical-align: middle;
}

.concept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin: 1.25rem 0;
}
.concept-card {
  background: var(--app-bg, #f5f7fb);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  border-left: 4px solid var(--app-accent, #2a7de1);
}
.concept-card h3 { margin: 0 0 0.4rem; font-size: 1.05rem; }
.concept-card p { margin: 0 0 0.5rem; font-size: 0.93rem; line-height: 1.55; }
.concept-card__detail { color: var(--app-muted, #5f6b7a); }

.callout-box {
  border-radius: 10px;
  padding: 1rem 1.15rem;
  margin: 1.25rem 0;
  border-left: 4px solid;
}
.callout-box h4 { margin: 0 0 0.5rem; font-size: 1rem; }
.callout-box p, .callout-box li { font-size: 0.94rem; line-height: 1.6; }
.callout-box ol { margin: 0.5rem 0 0.75rem 1.1rem; }
.callout-amber { background: #fffbeb; border-left-color: #f59e0b; }
.callout-blue { background: #eff6ff; border-left-color: #2563eb; }

.chart-explainer {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--app-text, #1f2a37);
  background: var(--app-bg, #f5f7fb);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  margin: 0 0 0.75rem;
}

.chart-note {
  font-size: 0.9rem;
  color: var(--app-muted, #5f6b7a);
  margin: 0.6rem 0 0;
}

/* ── Step 2 controls ─────────────────────────────────────────────────────── */

.control-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1rem;
}
.control label {
  display: block;
  font-weight: 700;
  margin-bottom: 0.35rem;
  font-size: 0.95rem;
}
.control input[type="range"] { width: 100%; }
.control-hint {
  font-size: 0.85rem;
  color: var(--app-muted, #5f6b7a);
  line-height: 1.5;
  margin: 0.4rem 0 0;
}
.control--checks .check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  margin-bottom: 0.2rem;
}
.control--checks .check input { width: auto; }

.run-row { display: flex; align-items: center; gap: 1rem; margin-top: 0.5rem; }
.run-status { font-size: 0.9rem; color: var(--app-muted, #5f6b7a); }
.run-status--error { color: #b91c1c; font-weight: 600; }
.data-summary { font-size: 0.9rem; color: var(--app-muted, #5f6b7a); margin: 0.75rem 0 0; }

.scenario-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.scenario-controls select { min-width: 280px; padding: 0.45rem 0.6rem; }
.scenario-info-box {
  background: var(--app-bg, #f5f7fb);
  border-radius: 8px;
  padding: 0.9rem 1rem;
  margin-top: 0.9rem;
}
.scenario-info-box h4 { margin: 0 0 0.4rem; }
.scenario-info-box p { margin: 0 0 0.5rem; font-size: 0.93rem; line-height: 1.55; }
.scenario-info-box .stakeholder {
  font-style: italic;
  color: var(--app-muted, #5f6b7a);
  border-left: 3px solid var(--app-accent, #2a7de1);
  padding-left: 0.7rem;
}

.upload-block { margin-top: 1.5rem; }
.dropzone {
  border: 2px dashed #cbd5e1;
  border-radius: 10px;
  padding: 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.dropzone:hover, .dropzone:focus-visible, .dropzone.dragover {
  border-color: var(--app-accent, #2a7de1);
  background: #eff6ff;
}
.upload-status { font-size: 0.9rem; margin: 0.5rem 0 0; }

/* ── Results ─────────────────────────────────────────────────────────────── */

/* .app-main is a flex column, and a flex item defaults to min-width:auto, which
   means it refuses to shrink below its content. Without this the wide rules table
   stretches the whole section past the viewport instead of scrolling inside it. */
.app-main > section,
.app-main > section > .card,
.report-grid > .card {
  min-width: 0;
}

.table-scroll {
  overflow-x: auto;
  max-width: 100%;
  /* Momentum scrolling on touch, and a visible hint that there is more to the right. */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.table-scroll:focus-visible { outline: 2px solid var(--app-accent, #2a7de1); }

.rules-table, .two-by-two {
  /* auto + min-width lets the table exceed its container and scroll, rather than
     squashing every numeric column until the headers wrap into towers. */
  width: auto;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.rules-table th, .rules-table td,
.two-by-two th, .two-by-two td {
  padding: 0.5rem 0.55rem;
  text-align: right;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}
.rules-table th:first-child, .rules-table td:first-child,
.rules-table th:nth-child(2), .rules-table td:nth-child(2),
.rules-table th:last-child, .rules-table td:last-child,
.two-by-two th:first-child, .two-by-two td:first-child {
  text-align: left;
  white-space: normal;
}
/* Product names come from the student's own catalogue and can be long. Capping the
   two name columns keeps one verbose SKU from doubling the width of the table. */
.rules-table th:first-child, .rules-table td:first-child { max-width: 15rem; }
.rules-table th:nth-child(2), .rules-table td:nth-child(2) { max-width: 11rem; }
/* The numeric columns are the ones worth squeezing: their contents are short. */
.rules-table td:nth-child(n+3):nth-child(-n+8) { font-variant-numeric: tabular-nums; }
.rules-table thead th {
  background: var(--app-bg, #f5f7fb);
  font-weight: 700;
  position: sticky;
  top: 0;
}
/* The compact "?" explain pill in a header: square it off so it reads as an icon
   rather than a truncated word. */
.rules-table thead th .stat-explain {
  padding: 0.1em 0.4em;
  min-width: 1.5em;
}
/* batch-8 brief: (M1) sortable headings are buttons that look like the heading text, and
   the product search sits on one row above the table (wraps on a phone). */
.rules-table .th-sort {
  font: inherit;
  font-weight: 700;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
}
.rules-table .th-sort:focus-visible { outline: 2px solid var(--app-accent, #2a7de1); }
.rule-search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  margin: 0.75rem 0 0.5rem;
}
.rule-search-row label { font-weight: 600; }
.rule-search-row input[type="search"] {
  font: inherit;
  padding: 0.35rem 0.55rem;
  min-width: 14rem;
  max-width: 100%;
}
.rules-table tbody tr { cursor: pointer; }
.rules-table tbody tr:hover, .rules-table tbody tr:focus-within { background: #eff6ff; }
.rules-table tbody tr[aria-selected="true"] { background: #dbeafe; }

/* The chip is the first thing a student reads, so the two warnings must not look
   like compliments. Amber and grey, never green. */
.rule-chip {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}
.rule-chip--strong { background: #dcfce7; color: #166534; }
.rule-chip--popular_consequent { background: #fef3c7; color: #92400e; }
.rule-chip--rare_but_significant { background: #fef3c7; color: #92400e; }
.rule-chip--weak { background: #f1f5f9; color: #475569; }

.two-by-two caption {
  caption-side: top;
  text-align: left;
  font-weight: 700;
  padding-bottom: 0.5rem;
}
.two-by-two td.highlight { background: #dbeafe; font-weight: 700; }

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin: 1rem 0 1.25rem;
}
.icon-array-block h4 { margin: 0 0 0.6rem; font-size: 0.95rem; }
.icon-array {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 3px;
  max-width: 220px;
}
.icon-array span {
  display: block;
  aspect-ratio: 1;
  border-radius: 2px;
  background: #e2e8f0;
}
.icon-array span.on { background: var(--app-accent, #2a7de1); }
.icon-array-caption {
  font-size: 0.88rem;
  color: var(--app-muted, #5f6b7a);
  margin: 0.6rem 0 0;
  line-height: 1.5;
}

.metric-headline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.metric-headline__item {
  background: var(--app-bg, #f5f7fb);
  border-radius: 10px;
  padding: 0.9rem 1rem;
}
.metric-headline__label {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--app-muted, #5f6b7a);
}
.metric-headline .metric-headline__value {
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.15;
  margin: 0.2rem 0;
}
.metric-headline__sub { font-size: 0.85rem; color: var(--app-muted, #5f6b7a); }

.report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.25rem;
}

.diagnostics-list { list-style: none; margin: 0; padding: 0; }
.diagnostics-list li {
  border-left: 4px solid #f59e0b;
  background: #fffbeb;
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.75rem;
}
.diagnostics-list strong { display: block; margin-bottom: 0.25rem; }

.questions-list { margin: 0 0 0 1.15rem; }
.questions-list li { margin-bottom: 0.6rem; line-height: 1.6; }

/* ── Views + action card ─────────────────────────────────────────────────── */

.view-tabs {
  display: flex;
  gap: 0.4rem;
  border-bottom: 2px solid #e5e7eb;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.view-tab {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 0.55rem 0.9rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--app-muted, #5f6b7a);
  cursor: pointer;
  margin-bottom: -2px;
}
.view-tab:hover { color: var(--app-text, #1f2a37); }
.view-tab.is-active {
  color: var(--app-accent, #2a7de1);
  border-bottom-color: var(--app-accent, #2a7de1);
}
.view-tab:focus-visible { outline: 2px solid var(--app-accent, #2a7de1); outline-offset: 2px; }

.chart { width: 100%; min-height: 320px; }

.action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}
.action-choice {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: var(--app-bg, #f5f7fb);
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1.45;
}
.action-choice:has(input:checked) {
  border-color: var(--app-accent, #2a7de1);
  background: #eff6ff;
}
.action-choice input { margin-top: 0.2rem; }

.action-readout h4 {
  margin: 0.9rem 0 0.3rem;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--app-muted, #5f6b7a);
}
.action-readout p { margin: 0; font-size: 0.95rem; line-height: 1.6; }

@media print {
  .professor-mode-toggle, .dropzone, .run-row, .export-section { display: none; }
}