﻿.InputTable {
  /* tokens — match these to your display diagram */
  --sl-ink:     #1f2433;
  --sl-accent:  #2f6f5e;
  --sl-tint:    #f6f9f7;
  --sl-line:    #e6e9ee;
  --sl-focus:   #E8E8E8;
  --sl-stem-w:  2.4ch;    /* stem input: one number wide   */
  --sl-leaf-w:  22rem;    /* leaf input: room for many leaves */

  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--sl-line);
  border-radius: 14px;
  overflow: hidden;                 /* clips cells to the rounded corners */
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 10px 28px rgba(16,24,40,.06);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  margin:5px auto 20px;
}

/* subtle guide line between rows */
.InputTable tr + tr th,
.InputTable tr + tr td { border-top: 1px solid var(--sl-line); }

/* stem cell + the iconic solid divider on its right edge */
.InputTable th {
  padding: 0.3rem 0.7rem;
  text-align: center;
  background: #fff;
  border-right: 3px solid var(--sl-accent);
}

/* leaf cell = the tinted track */
.InputTable td {
  padding: 0.3rem 0.7rem;
  background: var(--sl-tint);
}

/* shared input reset so they look like part of the diagram */
.InputTable input {
  box-sizing: border-box;
  border: 0;
  background: transparent;
  outline: 0;
  padding: 0.25rem 0.3rem;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, "Cascadia Code", Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 1.1rem;
  color: var(--sl-ink);
}
.InputTable input:focus {
  background: var(--sl-focus);
  box-shadow: 0 0 0 2px var(--sl-accent);
}

/* stem input — narrow, bold, accent-coloured */
.InputTable th input {
  width: var(--sl-stem-w);
  text-align: center;
  font-weight: 700;
  color: var(--sl-accent);
}

/* leaf input — wide, with gentle spacing between typed digits */
.InputTable td input {
  width: var(--sl-leaf-w);
  text-align: left;
  letter-spacing: 1em;
}

.Key {
  display: inline-block;
  margin: 0.95rem 0 0;
  font-size: 0.82rem;
  color: #6b7280;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.KeySample {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-weight: 600;
  color: #2f6f5e;
  padding: 0.05rem 0.35rem;
  border-radius: 5px;
  background: #f6f9f7;
}

.PuzzleTable {
	margin:2px auto 15px;
	border-collapse:collapse;
}
.PuzzleTable th{
	border-right:6px black solid;
	padding-right:10px;
}
.PuzzleTable td{
	padding:5px;
}

.PuzzleTable input{
	font-size:28px;
	text-align:center;
}
#PuzzleTable2 th {
	font-size:32px;
	text-align:center;
	padding-top:14px;
	font-weight:normal;
}
 #PuzzleTable2 td.Given {
	font-size:32px;
	text-align:center;
	padding-top:18px;
}


