/* ==========================================================================
   Miloop AI: driftboard-eval.css
   Portfolio case study for driftboard-rag-eval.
   Consumes the tokens defined in style.css and adds no new ones.

   Deliberately the same anatomy and the same measurements as
   factloop-demo.css, so the two case studies read as one series rather than
   two designs. What is new here is only what that page had no need for: a
   table, a compliance notice, and links that are not live yet.
   ========================================================================== */

/* ==========================================================================
   Case study: hero
   ========================================================================== */
.driftboard-hero {
  padding-top: var(--space-5);
  padding-bottom: var(--space-4);
}

.driftboard-h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: calc(clamp(2rem, 3.8vw, 3rem) * var(--display-scale));
  line-height: 1.15;
  margin-top: var(--space-2);
  max-width: 20ch;
}
.driftboard-h1 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--loop-indigo), var(--loop-violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.driftboard-lede {
  margin-top: var(--space-3);
  color: var(--ink-dim);
  font-size: 1.08rem;
  max-width: 60ch;
}
.driftboard-lede + .driftboard-lede { margin-top: var(--space-2); }

.driftboard-spec {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) 0 0;
  border-top: 1px solid var(--border-soft);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.driftboard-spec-item { min-width: 0; }
.driftboard-spec-label {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.driftboard-spec-value {
  margin: 0.4rem 0 0;
  color: var(--ink-dim);
  font-size: 0.95rem;
  line-height: 1.5;
}

@media (max-width: 820px) {
  .driftboard-spec { grid-template-columns: 1fr; gap: var(--space-2); }
}

/* ==========================================================================
   Fictional-scenario notice
   ==========================================================================
   This has to be unmissable and has to read as a statement about the page
   rather than as part of the argument on it, so it takes the one border
   treatment nothing else on the site uses. It sits directly under the hero,
   above the first claim, because a disclaimer below the findings is a
   disclaimer most readers never reach.
   ========================================================================== */
.driftboard-notice {
  margin-top: var(--space-4);
  padding: var(--space-3);
  background: var(--bg-panel-raised);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  max-width: 72ch;
}

.driftboard-notice-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--loop-violet);
}
.driftboard-notice-label::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--loop-violet);
}

.driftboard-notice-body {
  margin-top: 0.6rem;
  color: var(--ink-dim);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* ==========================================================================
   Case study: prose
   ========================================================================== */
.driftboard-prose {
  margin-top: var(--space-3);
  color: var(--ink-dim);
  font-size: 1.05rem;
  line-height: 1.75;
  max-width: 66ch;
}
.driftboard-prose strong { color: var(--ink); font-weight: 600; }

/* Same treatment as the pipeline note on the factloop page: an aside that
   qualifies the section it follows without competing with it. */
.driftboard-callout {
  margin-top: var(--space-4);
  padding: var(--space-3);
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-left: 2px solid var(--loop-indigo);
  border-radius: var(--radius-md);
  color: var(--ink-dim);
  font-size: 0.95rem;
  line-height: 1.7;
  max-width: 72ch;
}

/* ==========================================================================
   Tables
   ==========================================================================
   The site had no table component before this page. Kept as quiet as the
   panels around it: no fills, no zebra striping, one hairline per row, and
   the header row in the same mono label style used for every other eyebrow
   on the site. The content is the taxonomy, not the grid it sits in.
   ========================================================================== */
.driftboard-table-caption {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* A four-column table cannot fold gracefully at 400px, so it scrolls inside
   its own box rather than forcing the page body to scroll sideways. */
.driftboard-table-wrap {
  margin-top: var(--space-2);
  max-width: 72ch;
  overflow-x: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}

.driftboard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.driftboard-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  vertical-align: bottom;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}

.driftboard-table td {
  padding: 0.85rem 1rem;
  vertical-align: top;
  line-height: 1.65;
  color: var(--ink-dim);
  border-top: 1px solid var(--border-soft);
}
.driftboard-table tbody tr:first-child td { border-top: none; }

/* The first column carries the term being defined, so it takes the text
   colour and the rest of the row stays subordinate to it. */
.driftboard-table td:first-child {
  color: var(--ink);
  font-weight: 500;
  min-width: 12ch;
}

/* Figures line up only in a fixed-width face. Left aligned rather than right
   because these columns are short and a ragged right edge reads worse here
   than an uneven one at the end of the number. */
.driftboard-table--figures { min-width: 30rem; }
.driftboard-table--figures td:not(:first-child) {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--ink);
  white-space: nowrap;
}

@media (max-width: 560px) {
  .driftboard-table th,
  .driftboard-table td { padding: 0.7rem 0.8rem; }
}

/* ==========================================================================
   Built with, and the links out
   ========================================================================== */
.driftboard-stack {
  margin-top: var(--space-2);
  color: var(--ink-dim);
  font-size: 0.95rem;
  line-height: 1.9;
  max-width: 66ch;
}

.driftboard-links {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  max-width: 66ch;
}

.driftboard-link-item {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.driftboard-link {
  font-size: 0.95rem;
  color: var(--ink-dim);
  border-bottom: 1px solid var(--border-soft);
  transition: color 0.15s ease, border-color 0.15s ease;
}
a.driftboard-link:hover {
  color: var(--ink);
  border-color: var(--loop-indigo);
}