/*
 * Free-tool pages — shared page layer.
 *
 * Two components: `.skugen` for /sku-generator/ and `.sqfee` for
 * /square-fee-calculator/. Both are close enough to `.price-calc` in
 * p-pricing.css to be tempting to share with it, and far enough not to: that
 * one is a two-column controls/result split with a headline number.
 *
 * They keep separate namespaces from each other for the same reason. The form
 * column really is the same shell — and duplicating ~30 lines of input styling
 * is still cheaper than a `--sku`/`--fee` modifier on every rule in both, which
 * is what sharing would cost once the output halves diverge, as they already
 * have: one scrolls 600 monospace rows, the other holds three tables.
 *
 * Same constraint as everywhere else: no literal colour, radius or font size.
 */

.skugen {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--s-6);
  align-items: start;
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  box-shadow: var(--shadow-md);
}

.skugen__controls,
.skugen__out {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  min-width: 0;
}

.skugen__field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.skugen__label {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
}

.skugen__hint {
  margin: 0;
  font-size: var(--t-xs);
  color: var(--muted);
}

.skugen__input,
.skugen__select {
  font: inherit;
  font-size: var(--t-sm);
  color: var(--ink);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--white);
  width: 100%;
  min-width: 0;
}

.skugen__input:focus-visible,
.skugen__select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* The three variant rows are one labelled group, so they sit closer to each
   other than the 8px that separates a label from its field. */
.skugen__field .skugen__input + .skugen__input { margin-top: var(--s-1); }

.skugen__opts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
}

.skugen__outhead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.skugen__count {
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
}

.skugen__acts {
  display: flex;
  gap: var(--s-2);
}

/* Scoped rather than a new .btn--sm: these two sit on the same line as a status
   line, and the 44px tap target the design system gives every button makes that
   row taller than the label it reports on. Nothing else on the site needs it. */
.skugen__acts .btn {
  min-height: 36px;
  padding: 0 var(--s-3);
  font-size: var(--t-xs);
}

/* Monospace so a column of codes lines up and a stray character is visible;
   the rest of the site has no mono face, hence the stack rather than a token. */
.skugen__list {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--ink);
  width: 100%;
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  resize: vertical;
}

.skugen__warn {
  margin: 0;
  font-size: var(--t-xs);
  color: var(--warn);
  background: var(--warn-tint);
  padding: var(--s-3);
  border-radius: var(--r-sm);
}

.skugen__fitwrap {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.skugen__fit {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}

.skugen__chip {
  font-size: var(--t-xs);
  font-weight: 600;
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-full);
  white-space: nowrap;
}

.skugen__chip--ok { color: var(--ok); background: var(--ok-tint); }
.skugen__chip--over { color: var(--warn); background: var(--warn-tint); }
.skugen__chip--idle { color: var(--muted); background: var(--surface); }

@media (max-width: 860px) {
  .skugen {
    grid-template-columns: 1fr;
    gap: var(--s-5);
    padding: var(--s-4);
  }
  /* Two across rather than one: at 375px three selects stack into a column
     taller than the list they configure. */
  .skugen__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------- /square-fee-calculator/ ----- */

.sqfee {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--s-6);
  align-items: start;
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  box-shadow: var(--shadow-md);
}

.sqfee__controls,
.sqfee__out {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  min-width: 0;
}

.sqfee__field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.sqfee__label {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
}

.sqfee__hint {
  margin: 0;
  font-size: var(--t-xs);
  color: var(--muted);
}

/* Empty until fx.js writes the method's note, and an empty <p> with a gap
   above it reads as a broken row. */
.sqfee__hint:empty { display: none; }

.sqfee__input,
.sqfee__select {
  font: inherit;
  font-size: var(--t-sm);
  color: var(--ink);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--white);
  width: 100%;
  min-width: 0;
}

.sqfee__input:focus-visible,
.sqfee__select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.sqfee__opts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
}

.sqfee__check {
  display: flex;
  gap: var(--s-2);
  align-items: baseline;
  font-size: var(--t-sm);
  color: var(--ink);
  cursor: pointer;
}

.sqfee__check em { color: var(--muted); font-style: normal; }

.sqfee__block {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
}

.sqfee__block:empty { display: none; }

.sqfee__blockhead {
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sqfee__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}

.sqfee__table th,
.sqfee__table td {
  padding: var(--s-2) var(--s-3);
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.sqfee__table thead th {
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sqfee__table tbody th { font-weight: 600; color: var(--ink); }

.sqfee__table tr:last-child th,
.sqfee__table tr:last-child td { border-bottom: 0; }

/* Tabular figures and right alignment so a column of money lines up on the
   decimal — the comparison the table exists for is vertical. */
.sqfee__table td { text-align: right; }
.sqfee__num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.sqfee__table .is-best { background: var(--ok-tint); }

.sqfee__badge {
  display: inline-block;
  margin-left: var(--s-2);
  padding: 0 var(--s-2);
  border-radius: var(--r-full);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ok);
  background: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sqfee__verdict {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--ink);
}

.sqfee__advice {
  margin: var(--s-2) 0 0;
  padding-left: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--muted);
}

@media (max-width: 860px) {
  .sqfee {
    grid-template-columns: 1fr;
    gap: var(--s-5);
    padding: var(--s-4);
  }
}

@media (max-width: 720px) {
  /* Same treatment p-shared.css gives .cap, and for the same reason: four
     money columns do not fit a phone, so each row becomes a card and the
     column header is repeated per cell from data-label. Not shared with .cap
     itself — that one also reorders a caption these tables do not have. */
  .sqfee__table,
  .sqfee__table tbody,
  .sqfee__table tr,
  .sqfee__table td,
  .sqfee__table th { display: block; }
  .sqfee__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .sqfee__table tbody tr { border-top: 1px solid var(--line); padding: var(--s-3) 0; }
  .sqfee__table tbody tr:first-child { border-top: 0; }
  .sqfee__table th,
  .sqfee__table td { border-bottom: 0; padding: var(--s-1) var(--s-3); }
  .sqfee__table tbody th { padding-bottom: var(--s-2); }
  .sqfee__table td { display: flex; justify-content: space-between; gap: var(--s-3); text-align: right; }
  .sqfee__table td::before { content: attr(data-label); color: var(--muted); font-size: var(--t-xs); text-align: left; }
  /* The row is a card now, so the highlight needs its own inset edge. */
  .sqfee__table .is-best { border-radius: var(--r-sm); }
}

@media (max-width: 460px) {
  .sqfee__opts { gap: var(--s-3); }
}