/* BizWithAi design system — shared components.
   Requires tokens.css to be loaded first. */

/* ---- Motion: functional only, 150-200ms ease. No scroll effects. ---- */
a, button, .card, .btn{
  transition:background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

/* ---- Card ---- */
.card{
  background:var(--navy-800);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:24px 28px;
}
[data-mode="print"] .card{
  background:transparent;
  border-color:var(--paper-line);
}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--font);
  font-size:var(--fs-15);
  font-weight:650;
  border-radius:var(--r-sm);
  padding:14px 26px;
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
}
.btn-primary{
  background:var(--accent);
  color:var(--accent-ink);
}
.btn-primary:hover{background:var(--accent-soft)}

.btn-secondary{
  background:transparent;
  border-color:var(--line);
  color:var(--text);
}
.btn-secondary:hover{border-color:var(--accent)}

/* ---- Callout box ----
   Tinted at 6-9% of its semantic colour, 1px border at 30%, radius r-3.
   Modifiers: .callout-ok / .callout-warn / .callout-accent / .callout-neutral */
.callout{
  border-radius:calc(var(--r) - 3px);
  padding:18px 20px;
  margin:20px 0;
}
.callout .callout-label{
  font-size:var(--fs-12);
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:700;
  display:block;
  margin-bottom:8px;
}
.callout-ok{ background:color-mix(in srgb, var(--ok) 8%, transparent); border:1px solid color-mix(in srgb, var(--ok) 30%, transparent) }
.callout-ok .callout-label{ color:var(--ok) }

.callout-warn{ background:color-mix(in srgb, var(--warn) 8%, transparent); border:1px solid color-mix(in srgb, var(--warn) 30%, transparent) }
.callout-warn .callout-label{ color:var(--warn) }

.callout-accent{ background:color-mix(in srgb, var(--accent) 8%, transparent); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent) }
.callout-accent .callout-label{ color:var(--accent) }

.callout-neutral{ background:color-mix(in srgb, var(--steel) 8%, transparent); border:1px solid color-mix(in srgb, var(--steel) 30%, transparent) }
.callout-neutral .callout-label{ color:var(--steel) }

/* ---- Table ----
   No vertical rules. Header row in accent, uppercase, tracked. Numbers tabular. */
table{
  width:100%;
  border-collapse:collapse;
  font-size:var(--fs-15);
}
th, td{
  text-align:left;
  padding:10px 12px;
  border-bottom:1px solid var(--line-soft);
  vertical-align:top;
}
th{
  color:var(--accent);
  font-size:11.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:700;
  border-bottom:1px solid var(--line);
}
td.num, th.num{
  text-align:right;
  font-variant-numeric:tabular-nums;
}

/* ---- Figure ---- */
figure{
  background:var(--navy-750);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:24px;
  margin:24px 0;
  break-inside:avoid;
  overflow-x:auto;
}
figure svg{display:block; max-width:100%; height:auto}
figcaption{
  font-style:italic;
  color:var(--dim);
  font-size:var(--fs-13);
  margin-top:12px;
}
/* Dense multi-panel diagrams shrink their SVG-unit text below legible size if
   forced to 100% width on a phone. Below the reading column's natural
   breakpoint, let them scroll horizontally at a legible floor width instead. */
@media (max-width:600px){
  figure svg{ width:auto; min-width:560px; max-width:none }
}

/* ---- Badge / level pill ----
   Foundation -> ok, Working -> accent, Operator -> warn, 13% fill / 30% border. */
.pill{
  display:inline-block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:700;
  padding:3px 9px;
  border-radius:var(--r-sm);
}
.pill-foundation{ background:color-mix(in srgb, var(--ok) 13%, transparent); border:1px solid color-mix(in srgb, var(--ok) 30%, transparent); color:var(--ok-soft) }
.pill-working{ background:color-mix(in srgb, var(--accent) 13%, transparent); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); color:var(--accent-soft) }
.pill-operator{ background:color-mix(in srgb, var(--warn) 13%, transparent); border:1px solid color-mix(in srgb, var(--warn) 30%, transparent); color:var(--warn-soft) }

/* ---- Learning outcome block (documents) ---- */
.outcome{
  border-left:3px solid var(--accent);
  padding:4px 0 4px 20px;
  margin:20px 0;
}
[data-mode="print"] .outcome{ border-left-color:var(--accent-print) }