/**
 * Calculator "device" — makes each calculator look like a real handheld calculator:
 * brand strip, LCD screen, LCD input slots, option keys, number keypad.
 *
 * Every calculator has its own colour combination, set by the custom
 * properties in the [data-theme-calc="..."] blocks at the bottom of this file.
 * The device keeps the same colours in light and dark mode (it is a "physical" object).
 */

/* --- Layout: calculator on the left, detailed results on the right ------ */

.calc-device-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 1000px) {
  .calc-device-layout {
    grid-template-columns: minmax(0, 470px) minmax(0, 1fr);
  }
  .calc-device-layout .calc-results {
    margin-top: 0;
  }
}

/* --- Default palette (overridden per calculator below) ------------------ */

.calc-device {
  --case-top: #2f6b52;
  --case-bottom: #1b4332;
  --case-edge: #133024;
  --case-label: #cfe3d6;
  --lcd: #c8dcb6;
  --lcd-shade: #b3cba0;
  --lcd-ink: #1f2d1c;
  --lcd-frame: #0f2219;
  --fn: #2a4f3e;
  --fn-edge: #10261c;
  --fn-ink: #e8f2ea;
  --go: #e9a23b;
  --go-edge: #b4751c;
  --go-ink: #2a1a05;
  --clear: #c8553d;
  --clear-edge: #8f3424;
  --key: #f4f6f2;
  --key-edge: #c5cdc4;
  --key-ink: #1f2d1c;
  --focus: #ffd166;

  /* reset the generic card look from calculator-landing.css */
  padding: 1.25rem 1.25rem 1.4rem;
  border: 0;
  border-radius: 30px;
  background: linear-gradient(170deg, var(--case-top), var(--case-bottom));
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.18),
    inset 0 -6px 0 var(--case-edge),
    0 24px 48px -18px rgba(16, 24, 20, 0.55),
    0 4px 10px rgba(16, 24, 20, 0.2);
  color: var(--case-label);
  width: 100%;
  max-width: 470px;
}

/* --- Brand strip -------------------------------------------------------- */

.calc-device__brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
  padding: 0 0.25rem;
}

.calc-device__name {
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.calc-device__model {
  font-family: ui-monospace, "Cascadia Mono", Consolas, "SFMono-Regular", monospace;
  font-size: 0.7rem;
  opacity: 0.75;
}

.calc-device__solar {
  display: grid;
  grid-template-columns: repeat(4, 14px);
  gap: 2px;
  padding: 3px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 4px;
}

.calc-device__solar i {
  height: 12px;
  background: linear-gradient(160deg, #3a3f46, #22262b);
  border-radius: 1px;
}

/* --- LCD screen ---------------------------------------------------------- */

.calc-lcd {
  background: linear-gradient(180deg, var(--lcd), var(--lcd-shade));
  border: 3px solid var(--lcd-frame);
  border-radius: 12px;
  padding: 0.75rem 1rem 0.7rem;
  color: var(--lcd-ink);
  font-family: ui-monospace, "Cascadia Mono", Consolas, "SFMono-Regular", monospace;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.28);
  min-width: 0;
}

.calc-lcd__status {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  opacity: 0.85;
  min-height: 1em;
}

.calc-lcd__label {
  margin-top: 0.35rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: right;
}

.calc-lcd__value {
  font-size: clamp(2rem, 9vw, 2.9rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-align: right;
  overflow-wrap: anywhere;
}

.calc-lcd__value.is-long {
  font-size: clamp(1.35rem, 6vw, 1.75rem);
}

.calc-lcd__note {
  font-size: 0.8rem;
  text-align: right;
  min-height: 1.2em;
}

.calc-lcd__extra {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
  margin-top: 0.45rem;
  padding-top: 0.45rem;
  border-top: 1px dashed currentColor;
  font-size: 0.78rem;
}

.calc-lcd__extra:empty {
  display: none;
}

.calc-lcd__extra b {
  font-weight: 700;
}

/* --- Labels, hints, errors on the dark case ------------------------------ */

.calc-device .calc-form {
  display: grid;
  gap: 0.9rem;
  margin-top: 1rem;
}

.calc-device__label {
  display: block;
  margin: 0 0 0.3rem;
  padding: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--case-label);
}

.calc-device .calc-card__hint {
  color: var(--case-label);
  opacity: 0.8;
  font-size: 0.75rem;
  margin-top: 0.3rem;
}

.calc-device .calc-card__error {
  color: #fff;
  background: rgba(180, 35, 24, 0.85);
  border-radius: 6px;
  font-size: 0.75rem;
  margin-top: 0.3rem;
  padding: 0;
}

.calc-device .calc-card__error:not(:empty) {
  padding: 0.2rem 0.5rem;
}

.calc-device .calc-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

/* --- LCD input slots ----------------------------------------------------- */

.calc-device__slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.75rem;
}

.calc-device__slots--one {
  grid-template-columns: minmax(0, 1fr);
}

.calc-slot {
  min-width: 0;
}

.calc-slot__input {
  width: 100%;
  min-width: 0;
  font-family: ui-monospace, "Cascadia Mono", Consolas, "SFMono-Regular", monospace;
  font-size: 1.25rem;
  font-weight: 700;
  text-align: right;
  color: var(--lcd-ink);
  background: var(--lcd);
  border: 3px solid var(--lcd-frame);
  border-radius: 9px;
  padding: 0.45rem 0.6rem;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.22);
  -moz-appearance: textfield;
  appearance: textfield;
}

.calc-slot__input::-webkit-outer-spin-button,
.calc-slot__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.calc-slot__input:focus {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.calc-slot.is-active .calc-slot__input {
  border-color: var(--go);
}

.calc-slot.is-invalid .calc-slot__input {
  border-color: #b42318;
}

/* --- Keys --------------------------------------------------------------- */

.calc-key {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 50px;
  padding: 0.35rem 0.25rem;
  border: 0;
  border-radius: 12px;
  font: inherit;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.1;
  color: var(--key-ink);
  background: var(--key);
  box-shadow: 0 4px 0 var(--key-edge), 0 6px 10px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition: transform 60ms ease, box-shadow 60ms ease;
  text-align: center;
}

.calc-key:active,
.calc-key.is-pressed {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--key-edge), 0 2px 4px rgba(0, 0, 0, 0.25);
}

.calc-key:focus-visible,
.calc-key--option:focus-within {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.calc-key__small {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.8;
}

.calc-key--fn {
  background: var(--fn);
  color: var(--fn-ink);
  font-size: 0.9rem;
  min-height: 46px;
  box-shadow: 0 4px 0 var(--fn-edge), 0 6px 10px rgba(0, 0, 0, 0.3);
}

.calc-key--fn:active {
  box-shadow: 0 1px 0 var(--fn-edge);
}

.calc-key--go {
  background: var(--go);
  color: var(--go-ink);
  font-size: 1.6rem;
  box-shadow: 0 4px 0 var(--go-edge), 0 6px 10px rgba(0, 0, 0, 0.3);
}

.calc-key--go:active {
  box-shadow: 0 1px 0 var(--go-edge);
}

.calc-key--clear {
  background: var(--clear);
  color: #fff;
  box-shadow: 0 4px 0 var(--clear-edge), 0 6px 10px rgba(0, 0, 0, 0.3);
}

.calc-key--clear:active {
  box-shadow: 0 1px 0 var(--clear-edge);
}

/* Option keys: the radio is hidden but still focusable for keyboard users */
.calc-key__radio {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.calc-key--option:has(.calc-key__radio:checked) {
  background: var(--lcd);
  color: var(--lcd-ink);
  box-shadow: 0 4px 0 var(--lcd-shade), 0 0 0 2px var(--go), 0 6px 10px rgba(0, 0, 0, 0.3);
}

.calc-keys {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
  gap: 0.55rem;
}

.calc-keys--many {
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}

/* --- Number keypad ------------------------------------------------------- */

.calc-pad {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
  grid-template-areas:
    "k7 k8 k9 back"
    "k4 k5 k6 clear"
    "k1 k2 k3 go"
    "k0 k0 dot go";
  margin-top: 0.25rem;
}

.calc-pad__back { grid-area: back; }
.calc-pad__clear { grid-area: clear; }
.calc-pad__go { grid-area: go; }
.calc-pad__zero { grid-area: k0; }
.calc-pad__dot { grid-area: dot; }

.calc-pad--short {
  grid-template-columns: 1fr 2fr;
  grid-template-areas: none;
}

/* --- Bottom tools row ---------------------------------------------------- */

.calc-device .calc-device__tools {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0.5rem;
  margin-top: 0.25rem;
  padding-top: 0;
  border-top: 0;
}

.calc-device__tools .calc-key {
  min-height: 40px;
  font-size: 0.8rem;
}

.calc-device .calc-status {
  margin: 0;
  color: var(--case-label);
  font-size: 0.85rem;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .calc-key { transition: none; }
}

@media print {
  .calc-pad,
  .calc-device__tools,
  .calc-device__solar {
    display: none !important;
  }
  .calc-device {
    box-shadow: none;
  }
}

/* --- One colour combination per calculator ------------------------------ */

/* Mulch — bark brown with an amber screen */
.calc-device[data-theme-calc="mulch"] {
  --case-top: #8a6236; --case-bottom: #5c3f22; --case-edge: #3d2915; --case-label: #f3e3cc;
  --lcd: #efd9a0; --lcd-shade: #dcc282; --lcd-ink: #3a2a10; --lcd-frame: #2b1d0c;
  --fn: #6b4a28; --fn-edge: #3a2713; --fn-ink: #fbefdc;
  --go: #8fbf5a; --go-edge: #5f8a33; --go-ink: #1d2a0c;
}

/* Soil — deep earth red with a sand screen */
.calc-device[data-theme-calc="soil"] {
  --case-top: #7a3b2c; --case-bottom: #4f2219; --case-edge: #33150f; --case-label: #f4d9cf;
  --lcd: #e8d6b5; --lcd-shade: #d4bf98; --lcd-ink: #3b2116; --lcd-frame: #26110b;
  --fn: #5e2b20; --fn-edge: #33150f; --fn-ink: #fbe7df;
  --go: #f0b84a; --go-edge: #b9861f; --go-ink: #2d1c02;
}

/* Compost — garden green with a classic green screen (the approved preview) */
.calc-device[data-theme-calc="compost"] {
  --case-top: #2f6b52; --case-bottom: #1b4332; --case-edge: #133024; --case-label: #cfe3d6;
  --lcd: #c8dcb6; --lcd-shade: #b3cba0; --lcd-ink: #1f2d1c; --lcd-frame: #0f2219;
  --fn: #2a4f3e; --fn-edge: #10261c; --fn-ink: #e8f2ea;
  --go: #e9a23b; --go-edge: #b4751c; --go-ink: #2a1a05;
}

/* Compost mix — olive with a lime screen */
.calc-device[data-theme-calc="compost-mix"] {
  --case-top: #6b7530; --case-bottom: #434b18; --case-edge: #2c320e; --case-label: #eef2cf;
  --lcd: #dcea9c; --lcd-shade: #c6d67f; --lcd-ink: #2a3108; --lcd-frame: #1e2306;
  --fn: #545d22; --fn-edge: #2c320e; --fn-ink: #f6f8e4;
  --go: #e07a3f; --go-edge: #a8521f; --go-ink: #2b1203;
  --clear: #a8324a; --clear-edge: #6f1d2f;
}

/* Raised bed — slate blue with an ice screen */
.calc-device[data-theme-calc="raised-bed"] {
  --case-top: #4a6375; --case-bottom: #2c3f4d; --case-edge: #1c2a34; --case-label: #dbe7ef;
  --lcd: #cfe2e8; --lcd-shade: #b6ced6; --lcd-ink: #17303b; --lcd-frame: #11202a;
  --fn: #3a5162; --fn-edge: #1c2a34; --fn-ink: #eaf2f7;
  --go: #f2c14e; --go-edge: #b98e1f; --go-ink: #2c2003;
}

/* Watering — water blue with an aqua screen */
.calc-device[data-theme-calc="watering"] {
  --case-top: #2b6cb0; --case-bottom: #1a4778; --case-edge: #102f52; --case-label: #dcebfa;
  --lcd: #c3e7ee; --lcd-shade: #a6d5de; --lcd-ink: #0d3440; --lcd-frame: #0a2338;
  --fn: #225a94; --fn-edge: #102f52; --fn-ink: #eaf4fd;
  --go: #ffb454; --go-edge: #c47f1d; --go-ink: #2d1a02;
}

/* Gravel — stone grey with a warm grey screen */
.calc-device[data-theme-calc="gravel"] {
  --case-top: #67696d; --case-bottom: #404246; --case-edge: #2a2c2f; --case-label: #ececea;
  --lcd: #dedbd2; --lcd-shade: #c9c5ba; --lcd-ink: #2b2a26; --lcd-frame: #1d1e20;
  --fn: #505256; --fn-edge: #2a2c2f; --fn-ink: #f2f2f0;
  --go: #e8743b; --go-edge: #ad4c1c; --go-ink: #2a1003;
}

/* Pot size — terracotta with a cream screen */
.calc-device[data-theme-calc="pot-size"] {
  --case-top: #c0643a; --case-bottom: #8c4122; --case-edge: #5e2a14; --case-label: #fbe5d8;
  --lcd: #f4e7cf; --lcd-shade: #e5d3b2; --lcd-ink: #4a2412; --lcd-frame: #3d1c0d;
  --fn: #9f4d29; --fn-edge: #5e2a14; --fn-ink: #fff1e8;
  --go: #3f8f5b; --go-edge: #276a3f; --go-ink: #ffffff;
  --clear: #5a3b2e; --clear-edge: #33201a;
}

/* Plant spacing — plum with a lavender screen */
.calc-device[data-theme-calc="plant-spacing"] {
  --case-top: #6b4580; --case-bottom: #432a54; --case-edge: #2c1a38; --case-label: #eee2f5;
  --lcd: #e2d8ee; --lcd-shade: #cdc0de; --lcd-ink: #2f1c3d; --lcd-frame: #1f1229;
  --fn: #573869; --fn-edge: #2c1a38; --fn-ink: #f6eefb;
  --go: #f2c14e; --go-edge: #b98e1f; --go-ink: #2c2003;
}