/* fur2ft — NES (Super Mario Bros palette) tile-grid theme.
   Every spacing/sizing value is a multiple or fraction of --tile so the
   whole layout scales as one unit at any viewport width. */

:root {
  --tile: clamp(20px, 2.5vw, 32px);

  --sky: #5C94FC;
  --brick: #C84C0C;
  --brick-light: #FC9838;
  --green: #00A800;
  --yellow: #FCBC3C;
  --red: #D82800;
  --black: #000000;
  --white: #FCFCFC;
  /* Reserved for buttons only, so they always read as "the clickable
     thing" against every panel color above, not just a same-colored box. */
  --action: #0058F8;

  --border: calc(var(--tile) / 8);
  --gap: calc(var(--tile) * 0.5);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--sky);
  color: var(--black);
  font-family: "Press Start 2P", monospace;
  font-size: calc(var(--tile) * 0.75);
  line-height: 1.6;
  padding: var(--gap);
  -webkit-font-smoothing: none;
  font-smooth: never;
  image-rendering: pixelated;
}

h1, h2, h3 {
  margin-bottom: var(--gap);
  line-height: 1.4;
}

/* Zero every block element's UA-default margin so all vertical spacing in
   this file is deliberate and expressed in --gap units, not an unscaled
   `1em` left over from the browser stylesheet. */
p, dl, ol, ul {
  margin: 0;
}

h1 {
  font-size: calc(var(--tile) * 1.5);
}

h2 {
  font-size: calc(var(--tile) * 1);
}

h3 {
  font-size: calc(var(--tile) * 0.85);
}

p, li {
  font-size: calc(var(--tile) * 0.6);
}

a {
  color: var(--black);
}

.site-header {
  text-align: center;
  color: var(--white);
  padding: var(--gap) 0;
}

.site-header h1 {
  text-shadow: var(--border) var(--border) 0 var(--black);
}

.tagline {
  font-size: calc(var(--tile) * 0.55);
}

main {
  max-width: calc(var(--tile) * 30);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap) * 2);
}

.panel {
  background: var(--brick-light);
  border: var(--border) solid var(--black);
  padding: calc(var(--gap) * 2);
}

.drop-zone {
  border: calc(var(--border) * 1.5) dashed var(--black);
  background: var(--sky);
  color: var(--white);
  padding: calc(var(--gap) * 4) var(--gap);
  text-align: center;
  cursor: pointer;
}

.drop-zone:focus,
.drop-zone.drag-over {
  background: var(--yellow);
  color: var(--black);
  outline: none;
}

.drop-zone p {
  margin: 0;
}

.error-text {
  color: var(--red);
  font-weight: bold;
  margin-top: var(--gap);
}

.summary-panel {
  background: var(--brick);
  color: var(--white);
}

.summary-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: calc(var(--gap) * 0.5) var(--gap);
  margin-bottom: calc(var(--gap) * 2);
  font-size: calc(var(--tile) * 0.55);
}

.summary-list dt {
  font-weight: bold;
}

.summary-list dd {
  margin: 0;
}

.fixed-arp-choice {
  background: var(--yellow);
  color: var(--black);
  border: var(--border) solid var(--black);
  padding: calc(var(--gap) * 1.5);
  /* Padding is inside the border -- it only spaces the last option from
     this box's own edge, not this box from the button after it. That
     needs its own margin, or the button touches the box directly. */
  margin-bottom: var(--gap);
  font-size: calc(var(--tile) * 0.5);
}

.fixed-arp-choice h3 {
  font-size: calc(var(--tile) * 0.6);
  margin-bottom: var(--gap);
}

.fixed-arp-option {
  display: block;
  background: var(--white);
  color: var(--black);
  border: var(--border) solid var(--black);
  padding: calc(var(--gap) * 0.75) var(--gap);
  /* Matches .fixed-arp-choice's own bottom padding, so the gap to the
     next option and the gap from the last option down to the Convert
     button (via that padding) read as the same size. */
  margin-bottom: calc(var(--gap) * 1.5);
  cursor: pointer;
}

.fixed-arp-option:last-of-type {
  margin-bottom: 0;
}

.fixed-arp-option:has(input:checked) {
  background: var(--action);
  color: var(--white);
}

.fixed-arp-option input {
  margin-right: calc(var(--gap) * 0.5);
}

.fixed-arp-option[data-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
}

.fixed-arp-option .option-detail {
  display: block;
  margin-left: calc(var(--gap) * 1.5);
  font-size: calc(var(--tile) * 0.45);
}

.btn {
  display: inline-block;
  font-family: inherit;
  font-size: calc(var(--tile) * 0.6);
  background: var(--action);
  color: var(--white);
  border: var(--border) solid var(--black);
  padding: var(--gap) calc(var(--gap) * 1.5);
  cursor: pointer;
}

.btn:hover,
.btn:active,
.btn:focus {
  background: var(--yellow);
  color: var(--black);
  outline: none;
}

.result-panel {
  background: var(--green);
  color: var(--white);
}

#warnings-block {
  margin-top: calc(var(--gap) * 2);
  background: var(--yellow);
  color: var(--black);
  border: var(--border) solid var(--black);
  padding: calc(var(--gap) * 1.5);
}

.warnings-hint {
  font-size: calc(var(--tile) * 0.5);
  margin-bottom: var(--gap);
}

.warnings-list {
  background: var(--white);
  color: var(--black);
  border: var(--border) solid var(--black);
  margin-bottom: calc(var(--gap) * 2);
  padding: calc(var(--gap) * 1.5) calc(var(--gap) * 1.5) calc(var(--gap) * 1.5) calc(var(--gap) * 2.5);
  max-height: calc(var(--tile) * 12);
  overflow-y: auto;
}

.warnings-list li {
  /* The global `p, li` rule sets font-size directly on <li> elements,
     which beats inheritance from this list's own font-size — it must be
     repeated here, not just declared on the parent .warnings-list. */
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: calc(var(--tile) * 0.26);
  line-height: 1.7;
  margin-bottom: calc(var(--gap) * 0.75);
}

.warnings-list li:last-child {
  margin-bottom: 0;
}

.error-panel {
  background: var(--red);
  color: var(--white);
}

.howto-panel ol {
  /* "outside" markers can render past the <ol>'s own left edge if the
     glyphs are wider than the reserved padding -- which happens with this
     font, pushing "1." etc. left of the panel's heading. "inside" makes
     the marker part of the li's own content, so it can't escape. */
  list-style-position: inside;
  padding-left: 0;
}

.howto-panel li {
  margin-bottom: var(--gap);
}

.howto-panel li:last-child {
  margin-bottom: 0;
}

.howto-panel code {
  font-family: inherit;
  background: var(--white);
  padding: 0 calc(var(--gap) * 0.25);
}

.site-footer {
  text-align: center;
  color: var(--white);
  font-size: calc(var(--tile) * 0.45);
  padding: var(--gap) 0;
}

@media (max-width: 600px) {
  .summary-list {
    grid-template-columns: 1fr;
  }
}