/* Local Model Fit Sheet — a memory budget, read before a long download.
 *
 * The page is a table of yes/tight/no, and the design problem is that "tight"
 * has to read as its own answer rather than as a weak yes. Runtime overhead is
 * not in this arithmetic, so a cell with a gigabyte spare is genuinely a
 * different claim from one with eight, and a palette that shaded from green to
 * red would collapse the two into a gradient.
 *
 * So three states, three colours, no gradient between them:
 *
 *   --product-signal  fits. Room to spare beyond the margin.
 *   --product-warn    tight. Fits this arithmetic and not necessarily the
 *                     machine. Amber because it is a "try it", and amber is
 *                     the one colour nobody reads as permission.
 *   --product-alarm   no. Does not fit at all.
 *
 * Every cell shows weights + cache separately as well as the total, because
 * which half is costing the memory decides what the reader does about it: too
 * much weight means a smaller quant, too much cache means less context or a
 * quantised cache, and the totals alone never say which.
 */

.product[data-product="model-fit"] {
  --product-ink: #e3eaf1;
  --product-paper: #111820;
  --product-signal: #67bd83;
  --product-warn: #d3a13b;
  --product-alarm: #d46b61;
  --product-quiet: #9aa7b4;
  --mf-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

.product[data-product="model-fit"] [data-pane-body] > .field-help,
.product[data-product="model-fit"] .mf-pane-intro {
  max-width: 68ch;
}

.mf-pane-intro {
  margin: 0 0 .8rem;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.5;
}

/* Model Fit used private class names that had no rules anywhere in the
   product or platform stylesheets. Keeping the platform's .input/.btn hooks
   and adding this product-specific sizing makes every control legible without
   giving the sheet generic application chrome. */
.mf-input {
  width: 100%;
  min-width: 0;
  min-height: 3rem;
  font-size: 1rem;
}

textarea.mf-input {
  min-height: 9rem;
  resize: vertical;
  line-height: 1.5;
}

.mf-form {
  display: grid;
  gap: .85rem;
  max-width: 50rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--border) 75%, var(--product-signal));
  border-radius: .5rem;
  background: color-mix(in srgb, var(--surface) 92%, var(--product-paper));
}

.mf-machine-fields {
  display: grid;
  grid-template-columns: minmax(14rem, 2fr) minmax(9rem, 1fr);
  gap: .8rem 1rem;
}

.mf-machine-notes { grid-column: 1 / -1; }
.mf-form .tool-actions { margin-top: 0; }
.mf-form-status:empty { display: none; }

.product[data-product="model-fit"] button.btn-quiet {
  min-height: 2.5rem;
  padding: .4rem .65rem;
  border: 0;
  border-radius: .3rem;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .18em;
  cursor: pointer;
}

.product[data-product="model-fit"] button.btn-quiet:hover {
  background: color-mix(in srgb, var(--surface) 75%, transparent);
  color: var(--text);
}

.product[data-product="model-fit"] button.mf-remove:hover { color: var(--product-alarm); }

.product[data-product="model-fit"] .btn {
  background: var(--product-signal);
  color: #08140c;
}

.product[data-product="model-fit"] details.pane-form {
  max-width: 50rem;
  margin-top: .85rem;
  padding: .6rem .8rem;
  border-color: color-mix(in srgb, var(--border) 82%, var(--product-paper));
  background: color-mix(in srgb, var(--surface) 96%, var(--product-paper));
}

.product[data-product="model-fit"] details.pane-form > summary {
  min-height: 2rem;
  padding: .35rem .15rem;
  color: var(--text);
  font-weight: 650;
}

.mf-picker {
  max-width: 40rem;
  margin: .8rem 0;
}

.mf-fit-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem 1rem;
  max-width: 50rem;
  margin: .9rem 0;
  padding: .9rem 1rem;
  border-left: .25rem solid var(--product-signal);
  background: color-mix(in srgb, var(--surface) 90%, var(--product-paper));
}

/* ── Rows ──────────────────────────────────────────────────────────── */

.mf-rows {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .5rem;
}

.mf-row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  padding: .8rem .95rem;
  border: 1px solid var(--border);
  border-left: .25rem solid var(--border);
  border-radius: .45rem;
  background: var(--surface);
}

.mf-row > div:first-child { min-width: 0; }
.mf-row .field-help { margin: .25rem 0 0; }
.mf-row .tool-actions { margin: 0; flex: 0 0 auto; }
.mf-row--active { border-left-color: var(--product-signal); }
.mf-row--editing { display: block; border-left-color: var(--product-signal); }

.mf-row-title {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: baseline;
  margin: 0;
  font-weight: 650;
}

.mf-heading { margin: 1.4rem 0 .3rem; font-size: 1.02rem; }
.mf-form-status { min-height: 1.2em; }
.mf-form-status--bad { color: var(--product-alarm); font-weight: 600; }

/* ── Badges ────────────────────────────────────────────────────────── */

.mf-badge {
  padding: .1rem .45rem;
  border-radius: .25rem;
  background: color-mix(in srgb, var(--muted) 16%, transparent);
  color: var(--muted);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
}

.mf-badge--vram {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--mf-mono);
}

.mf-badge--pasted {
  background: color-mix(in srgb, var(--product-signal) 20%, transparent);
  color: color-mix(in srgb, var(--product-signal) 92%, var(--text));
}

.mf-badge--tight {
  background: color-mix(in srgb, var(--product-warn) 22%, transparent);
  color: color-mix(in srgb, var(--product-warn) 92%, var(--text));
}

/* A figure nobody has checked against a running model says so. */
.mf-badge--unverified {
  margin-left: .4rem;
  background: color-mix(in srgb, var(--product-warn) 18%, transparent);
  color: color-mix(in srgb, var(--product-warn) 92%, var(--text));
}

/* ── Architecture specs ────────────────────────────────────────────── */

.mf-specs {
  margin: .35rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .9rem;
  font-family: var(--mf-mono);
  font-size: .85rem;
}

.mf-spec { display: inline-flex; gap: .3rem; align-items: baseline; }
.mf-spec em { color: var(--muted); font-style: normal; font-size: .76rem; }
.mf-spec--sliding { color: var(--product-signal); }
.mf-spec--sliding em { color: color-mix(in srgb, var(--product-signal) 70%, var(--muted)); }

.mf-provenance {
  margin: .45rem 0 0;
  padding-left: .6rem;
  border-left: 2px solid var(--border);
  color: var(--muted);
  font-size: .78rem;
}

/* The source is a link, not a URL to retype. It is the evidence for every
   number on the row, so it reads as followable rather than as a citation
   somebody is expected to squint at. */
.mf-source-link {
  color: var(--product-signal);
  font-family: var(--mf-mono);
  font-style: normal;
  word-break: break-word;
}

.mf-source-link:hover,
.mf-source-link:focus-visible { text-decoration: underline; }

.mf-source-aside { font-style: italic; }

.mf-tags {
  margin: .4rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}

.mf-tag {
  padding: .08rem .4rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-family: var(--mf-mono);
  font-size: .72rem;
}

.mf-aka summary { cursor: pointer; color: var(--muted); font-size: .8rem; }
.mf-aka ul { margin: .3rem 0 0 1rem; padding: 0; font-size: .8rem; }

/* ── Where to read your VRAM ───────────────────────────────────────── */

.mf-guides {
  margin: .5rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem 1rem;
}

.mf-guide {
  display: grid;
  gap: .15rem;
  padding-left: .6rem;
  border-left: 2px solid var(--border);
}

.mf-guide-platform { font-weight: 650; font-size: .85rem; }

.mf-guide-command {
  font-family: var(--mf-mono);
  font-size: .8rem;
  overflow-wrap: anywhere;
  color: var(--product-signal);
}

.mf-guide-note { color: var(--muted); font-size: .78rem; }

.mf-paste { font-family: var(--mf-mono); font-size: .8rem; }

/* ── The headline ──────────────────────────────────────────────────── */

.mf-headline { margin-top: 1.4rem; }
.mf-headline-copy { margin: 0 0 .65rem; }

.mf-bests { margin: .5rem 0 0; padding: 0; list-style: none; display: grid; gap: .25rem; }

.mf-best {
  display: grid;
  grid-template-columns: minmax(5rem, .65fr) minmax(7rem, 1fr) minmax(6rem, auto) auto;
  gap: .4rem .8rem;
  align-items: baseline;
  min-height: 2.65rem;
  padding: .5rem .65rem;
  border-radius: .25rem;
  border-left: .2rem solid var(--product-signal);
  background: color-mix(in srgb, var(--surface) 86%, var(--product-signal));
}

.mf-best--tight {
  border-left-color: var(--product-warn);
  background: color-mix(in srgb, var(--surface) 86%, var(--product-warn));
}

.mf-best-quant { flex: 0 0 5rem; font-family: var(--mf-mono); font-weight: 700; }
.mf-best-ctx { font-weight: 600; }
.mf-best-total { text-align: right; font-family: var(--mf-mono); color: var(--muted); }

.mf-none {
  margin: .5rem 0 0;
  padding: .5rem .7rem;
  border-left: .2rem solid var(--product-alarm);
  background: color-mix(in srgb, var(--surface) 88%, var(--product-alarm));
}

/* ── The grid ──────────────────────────────────────────────────────── */

/* Wide by nature — seven quantisations against six context lengths — so it
   scrolls inside its own box and never makes the page scroll sideways. */
.mf-table-wrap {
  position: relative;
  margin: 1.1rem 0 0;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: .45rem;
  background: var(--surface);
  scrollbar-color: var(--product-signal) var(--product-paper);
}

.mf-table-wrap:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--product-signal) 40%, transparent);
  outline-offset: 2px;
}

.mf-table {
  width: 100%;
  min-width: 46rem;
  border-collapse: collapse;
  font-size: .82rem;
}

.mf-table th,
.mf-table td {
  padding: .5rem .6rem;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.mf-table thead th {
  background: color-mix(in srgb, var(--surface) 84%, var(--product-paper));
  font-family: var(--mf-mono);
  font-size: .78rem;
  color: var(--muted);
  white-space: nowrap;
}

.mf-quant {
  position: sticky;
  left: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--surface) 88%, var(--product-paper));
  font-family: var(--mf-mono);
  white-space: nowrap;
}

.mf-table thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
}

.mf-cell { display: table-cell; }
.mf-cell span { display: block; }

.mf-verdict { font-weight: 700; font-size: .78rem; letter-spacing: .03em; }
.mf-total { font-family: var(--mf-mono); font-size: .84rem; }
.mf-split { font-family: var(--mf-mono); font-size: .72rem; color: var(--muted); }

.mf-cell--yes { background: color-mix(in srgb, var(--surface) 84%, var(--product-signal)); }
.mf-cell--yes .mf-verdict { color: var(--product-signal); }

/* Amber, and deliberately not a paler green. "Tight" is its own answer. */
.mf-cell--tight { background: color-mix(in srgb, var(--surface) 84%, var(--product-warn)); }
.mf-cell--tight .mf-verdict { color: var(--product-warn); }

.mf-cell--no { background: color-mix(in srgb, var(--surface) 90%, var(--product-alarm)); }
.mf-cell--no .mf-verdict { color: var(--product-alarm); }

.mf-legend {
  margin: .8rem 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: .25rem;
  color: var(--muted);
  font-size: .8rem;
}

.mf-legend-sliding { color: color-mix(in srgb, var(--product-signal) 80%, var(--text)); }

.mf-size-grid {
  margin: .5rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
  gap: .5rem;
}

.mf-size-field { margin: 0; }
.mf-size-input { font-family: var(--mf-mono); }

.mf-takeaway {
  max-width: 50rem;
  margin-top: 1.25rem;
  padding-top: .25rem;
  border-top: 1px solid var(--border);
}

.mf-takeaway .field-help { max-width: 62ch; }

@media (max-width: 44rem) {
  .mf-machine-fields,
  .mf-fit-controls,
  .mf-guides { grid-template-columns: 1fr; }
  .mf-row { flex-direction: column; }
  .mf-row .tool-actions { align-self: flex-end; }
  .mf-best { grid-template-columns: minmax(4.75rem, .7fr) minmax(6.5rem, 1fr) auto; }
  .mf-best .mf-badge { grid-column: 2 / -1; justify-self: start; }
  .mf-form { padding: .85rem; }
  .mf-table-wrap::after {
    content: "Scroll to compare context lengths";
    position: sticky;
    left: .65rem;
    display: block;
    width: fit-content;
    margin: .45rem .65rem;
    color: var(--muted);
    font-size: .72rem;
  }
}

@media print {
  /* The sheet is read beside the machine while something downloads, so the
     grid is the page. Tints are the first thing a print driver discards, and
     the verdict is the reason it was printed — so the words carry it, and a
     rule down the side marks what does not fit. */
  @page { size: landscape; margin: 12mm; }

  .mf-table { font-size: 9pt; }
  .mf-table th, .mf-table td { border: .5pt solid #999; }
  .mf-cell--yes, .mf-cell--tight, .mf-cell--no { background: none; }
  .mf-cell--no { border-left: 2pt solid #333; }
  .mf-cell--yes .mf-verdict, .mf-cell--tight .mf-verdict, .mf-cell--no .mf-verdict { color: #000; }
  .mf-provenance, .mf-legend { font-size: 8pt; color: #444; }
  /* Paper cannot follow a link, so the address is printed after it. */
  .mf-source-link { color: #000; }
  .mf-source-link::after { content: " (" attr(href) ")"; font-size: 7pt; color: #555; }

  .pane-form, .tool-actions, .mf-guides, .mf-size-grid, .mf-takeaway, details { display: none; }
}