/* calc.css – der Rechner im HP-42S-Look (CalculatorView.swift). Feste Farben aus Theme.swift → HP,
   unabhängig von Hell/Dunkel. Alle Maße in Designpunkten: × --s (Breite und Schrift) bzw. × --v (Höhe);
   beide setzt calc-ui.js aus der Fläche (Designgröße 470 × 804). --fit verkleinert zu lange Texte
   (minimumScaleFactor in Swift). Die Hilfe-Blätter liegen außerhalb und nutzen die Tokens aus app.css. */

.hp-calc {
  --hp-body-top: #33312E;
  --hp-body-bottom: #1F1E1C;
  --hp-bezel: #121110;
  --hp-lcd: #C5CDB2;
  --hp-lcd-shade: #B3BC9F;
  --hp-lcd-ink: #1C2317;
  --hp-lcd-faint: #5B6650;
  --hp-key-top: #4B4946;
  --hp-key-bottom: #353431;
  --hp-digit-top: #5A5854;
  --hp-digit-bottom: #42403D;
  --hp-key-edge: #0F0E0D;
  --hp-key-label: #F4F2EC;
  --hp-shift-key: #E8912D;
  --hp-shift-key-dark: #C8741A;
  --hp-shift-label: #F2A444;
  --hp-brand: #C9C4B8;
  --hp-rounded: ui-rounded, "SF Pro Rounded", var(--font);
  --s: 1px;
  --v: 1px;
  background: linear-gradient(var(--hp-body-top), var(--hp-body-bottom));
  color: var(--hp-key-label);
  font-family: var(--font);
  padding-top: var(--safe-top);
  overflow: hidden;
  touch-action: none;                 /* kein Zoom, kein Doppeltipp-Zoom, kein Verschieben */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* Reiterleiste ausgeblendet: Rechner reicht bis an den Home-Balken */
.hp-calc.hp-at-bottom { padding-bottom: var(--safe-bottom); }
/* Querformat: der Rechner steht links, rechts braucht er keinen Sicherheitsabstand */
body.split .hp-calc { padding-right: 0; }
/* „Nur Rechner“ (Arbeitsbereich zugeklappt): ohne Reiterleiste, im Querformat ohne Arbeitsbereich rechts */
body.calc-only #tabbar { display: none; }
body.calc-only #toast { bottom: calc(var(--safe-bottom) + 14px); }
body.split.calc-only #pane-calc { flex: 1 1 auto; border-right: 0; padding-right: var(--safe-right); }

.hp-calc button {
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.hp-calc button:focus { outline: none; }
.hp-calc button:focus-visible { outline: 2px solid var(--hp-shift-label); outline-offset: 2px; }

/* ---------- Rahmen (470 × 804 Designpunkte, zentriert) ---------- */
.hp-frame {
  flex: none;
  margin: auto;
  position: relative;
  width: calc(470 * var(--s));
  height: calc(804 * var(--v));
  padding: calc(16 * var(--v)) calc(18 * var(--s));
  display: flex;
  flex-direction: column;
}

/* ---------- Markenzeile ---------- */
.hp-brand {
  flex: none;
  height: calc(24 * var(--v));
  display: flex;
  align-items: center;
  gap: calc(8 * var(--s));
  min-width: 0;
}
.hp-brand-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: calc(8 * var(--s));
  white-space: nowrap;
  overflow: hidden;
}
.hp-name {
  flex: none;
  font-family: var(--hp-rounded);
  font-weight: 800;
  font-size: calc(17 * var(--s));
  color: var(--hp-brand);
}
.hp-owner {
  flex: none;
  font-family: var(--hp-rounded);
  font-weight: 600;
  font-size: calc(13 * var(--s));
  color: var(--hp-shift-label);
}
.hp-tag {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  font-size: calc(9.5 * var(--s));
  letter-spacing: calc(1.2 * var(--s));
  color: rgba(201, 196, 184, 0.7);
}
.hp-help-hint {
  display: none;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--hp-rounded);
  font-weight: 700;
  font-size: calc(13 * var(--s));
  color: var(--hp-shift-label);
}
.hp-frame.helpmode .hp-brand-text { display: none; }
.hp-frame.helpmode .hp-help-hint { display: block; }

.hp-brand-btns {
  flex: none;
  display: flex;
  align-items: center;
  margin-right: calc(-8 * var(--s));
}
/* kleine Symbole, aber 44 pt hohe Trefferfläche (ragt über die Markenzeile hinaus) */
.hp-bbtn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(30px, calc(40 * var(--s)), 46px);
  height: 44px;
  margin: -10px 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  color: rgba(201, 196, 184, 0.8);
}
.hp-bbtn .ico { width: max(15px, calc(17 * var(--s))); height: max(15px, calc(17 * var(--s))); }
.hp-bbtn:active { color: var(--hp-key-label); background: rgba(255, 255, 255, 0.07); }
.hp-bbtn.on { color: var(--hp-shift-label); }
.hp-bbtn:disabled { opacity: 0.35; }

/* ---------- LCD ---------- */
.hp-bezel {
  flex: none;
  position: relative;
  height: calc(204 * var(--v));
  margin-top: calc(8 * var(--v));
  padding: calc(9 * var(--s));
  border-radius: calc(11 * var(--s));
  background: var(--hp-bezel);
}
.hp-frame.helpmode .hp-bezel { box-shadow: 0 0 0 1.5px rgba(242, 164, 68, 0.55); }
.hp-lcd {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: calc(7 * var(--s)) calc(12 * var(--s));
  border-radius: calc(6 * var(--s));
  background: linear-gradient(var(--hp-lcd), var(--hp-lcd-shade));
  box-shadow: 0 calc(1 * var(--s)) calc(4 * var(--s)) rgba(0, 0, 0, 0.35);
  color: var(--hp-lcd-ink);
  font-family: var(--mono);
}

/* Anzeigesymbole, rechts Datum und Uhrzeit */
.hp-ann {
  flex: none;
  height: calc(15 * var(--s));
  display: flex;
  align-items: center;
  gap: calc(6 * var(--s));
  min-width: 0;
  color: rgba(28, 35, 23, 0.8);
  font-weight: 800;
  line-height: 1;
}
.hp-ann-items {
  flex: none;
  display: flex;
  gap: calc(10 * var(--s));
  font-size: calc(10 * var(--s));
  white-space: pre;
}
.hp-clock {
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
  display: block;
  overflow: hidden;
  white-space: pre;
  font-size: calc(10.5 * var(--s) * var(--fit, 1));
}

/* Stapelzeilen t, z, y, x bzw. Meldungen */
.hp-lines {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.hp-lines.four { --fs: calc(25 * var(--s)); }
.hp-lines.two { --fs: calc(32 * var(--s)); }
.hp-line {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: calc(8 * var(--s));
}
.hp-line .l {
  flex: none;
  width: calc(30 * var(--s));
  overflow: hidden;
  white-space: pre;
  font-weight: 500;
  font-size: calc(var(--fs) * 0.72);
  color: var(--hp-lcd-faint);
}
.hp-line .t {
  flex: 1 1 0;
  min-width: 0;
  display: block;
  overflow: hidden;
  white-space: pre;
  text-overflow: ellipsis;
  font-weight: 500;
  font-size: calc(var(--fs) * var(--fit, 1));
  line-height: 1.15;
}
.hp-line.msg .t { font-size: calc(var(--fs) * 0.82 * var(--fit, 1)); }

/* Menüzeile: sechs Softkeys (dunkel hinterlegt, Balken = Untermenü, • = aktiv) */
.hp-menu {
  flex: none;
  height: calc(26 * var(--s));
  margin-top: calc(4 * var(--s));
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: calc(4 * var(--s));
}
.hp-menu.none { visibility: hidden; }
.hp-soft {
  position: relative;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0 calc(2 * var(--s));
  border: 0;
  border-radius: calc(2 * var(--s));
  background: var(--hp-lcd-ink);
  color: var(--hp-lcd);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
}
.hp-soft .txt {
  display: block;
  width: 100%;
  overflow: hidden;
  white-space: pre;
  text-align: center;
  font-weight: 700;
  font-size: calc(12 * var(--s) * var(--fit, 1));
  line-height: 1;
}
.hp-soft.blank { background: transparent; }
.hp-soft.sub::before {
  content: "";
  position: absolute;
  left: calc(5 * var(--s));
  right: calc(5 * var(--s));
  top: calc(2.5 * var(--s));
  height: calc(2 * var(--s));
  background: var(--hp-lcd);
}
/* größere Trefferfläche: nach oben in die x-Zeile, nach unten in den Rand */
.hp-soft::after {
  content: "";
  position: absolute;
  left: calc(-2 * var(--s));
  right: calc(-2 * var(--s));
  top: calc(-6 * var(--s));
  bottom: calc(-13 * var(--s));
}
.hp-soft.off:not(.blank) { opacity: 0.45; }
.hp-soft.down:not(.off) { opacity: 0.72; }

.hp-spacer { flex: 1 1 auto; min-height: calc(12 * var(--v)); }

/* ---------- Tastatur ---------- */
.hp-keys {
  flex: none;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(7 * var(--v));
}
.hp-quickrow {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: calc(8 * var(--s));
  height: calc(28 * var(--v));
  margin-bottom: calc(1 * var(--v));
}
.hp-row { display: grid; }
.hp-row6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: calc(8 * var(--s));
  --kh: calc(44 * var(--v));
}
.hp-row5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: calc(12 * var(--s));
  --kh: calc(52 * var(--v));
}

/* Schnellknöpfe (flacher, mit Leuchtpunkt) */
.hp-quick {
  position: relative;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0 calc(3 * var(--s));
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(5 * var(--s));
  border-radius: calc(5 * var(--s));
  background: linear-gradient(#3B3936, #2A2927);
  box-shadow: inset 0 0 0 calc(1.1 * var(--s)) var(--hp-key-edge),
    0 calc(1.5 * var(--s)) calc(2.4 * var(--s)) rgba(0, 0, 0, 0.5);
  transition: transform 0.06s ease-out, box-shadow 0.06s ease-out;
}
.hp-quick::after {
  content: "";
  position: absolute;
  left: calc(-4 * var(--s));
  right: calc(-4 * var(--s));
  top: calc(-10 * var(--v));
  bottom: calc(-3 * var(--v));
}
.hp-led {
  flex: none;
  width: calc(5 * var(--s));
  height: calc(5 * var(--s));
  border-radius: 50%;
  background: #57544F;
}
.hp-qlbl {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: pre;
  font-weight: 700;
  font-size: calc(12 * var(--s) * var(--fit, 1));
  line-height: 1;
  color: rgba(244, 242, 236, 0.78);
}
.hp-quick.on {
  box-shadow: inset 0 0 0 calc(1.4 * var(--s)) rgba(242, 164, 68, 0.8),
    0 calc(1.5 * var(--s)) calc(2.4 * var(--s)) rgba(0, 0, 0, 0.5);
}
.hp-quick.on .hp-led { background: var(--hp-shift-label); box-shadow: 0 0 calc(6 * var(--s)) rgba(242, 164, 68, 0.9); }
.hp-quick.on .hp-qlbl { color: var(--hp-shift-label); }
.hp-frame.helpmode .hp-quick:not(.on) {
  box-shadow: inset 0 0 0 calc(1.1 * var(--s)) rgba(242, 164, 68, 0.45),
    0 calc(1.5 * var(--s)) calc(2.4 * var(--s)) rgba(0, 0, 0, 0.5);
}
.hp-quick.down {
  background: #252422;
  transform: translateY(calc(1 * var(--s)));
  box-shadow: inset 0 0 0 calc(1.1 * var(--s)) var(--hp-key-edge),
    0 calc(0.3 * var(--s)) calc(0.6 * var(--s)) rgba(0, 0, 0, 0.5);
}
.hp-quick.on.down {
  box-shadow: inset 0 0 0 calc(1.4 * var(--s)) rgba(242, 164, 68, 0.8),
    0 calc(0.3 * var(--s)) calc(0.6 * var(--s)) rgba(0, 0, 0, 0.5);
}

/* Tasten: oben die orange Shift-Funktion, darunter die Taste */
.hp-key {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(2 * var(--s));
}
.hp-key.enter { grid-column: span 2; }
/* Trefferfläche bis zur Mitte der Zwischenräume */
.hp-row6 .hp-key::after { content: ""; position: absolute; inset: calc(-3.5 * var(--v)) calc(-4 * var(--s)); }
.hp-row5 .hp-key::after { content: ""; position: absolute; inset: calc(-3.5 * var(--v)) calc(-6 * var(--s)); }

.hp-shl {
  display: block;
  flex: none;
  width: calc(100% + 6 * var(--s));
  height: calc(13 * var(--s));
  line-height: calc(13 * var(--s));
  overflow: hidden;
  white-space: pre;
  text-align: center;
  font-weight: 700;
  font-size: calc(11 * var(--s) * var(--fit, 1));
  color: var(--hp-shift-label);
}
.hp-keys.shifted .hp-shl { color: #FFC46B; text-shadow: 0 0 calc(6 * var(--s)) rgba(255, 159, 46, 0.7); }
.hp-sup { font-size: 0.78em; vertical-align: 0.54em; line-height: 0; }

.hp-face {
  position: relative;
  flex: none;
  width: 100%;
  height: var(--kh);
  padding: 0 calc(3 * var(--s));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(6 * var(--s));
  background: linear-gradient(var(--hp-key-top), var(--hp-key-bottom));
  box-shadow: inset 0 0 0 calc(1.2 * var(--s)) var(--hp-key-edge),
    0 calc(2.2 * var(--s)) calc(3.2 * var(--s)) rgba(0, 0, 0, 0.55);
  transition: transform 0.06s ease-out, box-shadow 0.06s ease-out;
}
/* Glanzkante in der oberen Hälfte */
.hp-face::before {
  content: "";
  position: absolute;
  inset: calc(1.5 * var(--s));
  border-radius: calc(5 * var(--s));
  border: calc(1 * var(--s)) solid rgba(255, 255, 255, 0.10);
  -webkit-clip-path: inset(0 0 55% 0);
  clip-path: inset(0 0 55% 0);
  pointer-events: none;
}
.hp-key.digit .hp-face { background: linear-gradient(var(--hp-digit-top), var(--hp-digit-bottom)); }
.hp-key.shiftkey .hp-face { background: linear-gradient(var(--hp-shift-key), var(--hp-shift-key-dark)); }
.hp-frame.helpmode .hp-face {
  box-shadow: inset 0 0 0 calc(1.2 * var(--s)) rgba(242, 164, 68, 0.6),
    0 calc(2.2 * var(--s)) calc(3.2 * var(--s)) rgba(0, 0, 0, 0.55);
}

/* gedrückt: Finger, Aufleuchten (Hardware-Tastatur), gedrückte Shift-Taste */
.hp-key.down .hp-face,
.hp-key.flash .hp-face,
.hp-key.shiftkey.on .hp-face {
  transform: translateY(calc(1.2 * var(--s)));
  background: linear-gradient(var(--hp-key-bottom), rgba(53, 52, 49, 0.9));
  box-shadow: inset 0 0 0 calc(1.2 * var(--s)) var(--hp-key-edge),
    0 calc(0.5 * var(--s)) calc(1 * var(--s)) rgba(0, 0, 0, 0.55);
}
.hp-key.digit.down .hp-face,
.hp-key.digit.flash .hp-face { background: var(--hp-digit-bottom); }
.hp-key.shiftkey.down .hp-face,
.hp-key.shiftkey.flash .hp-face,
.hp-key.shiftkey.on .hp-face { background: var(--hp-shift-key-dark); }
.hp-key.down .hp-face::before,
.hp-key.flash .hp-face::before,
.hp-key.shiftkey.on .hp-face::before { border-color: rgba(255, 255, 255, 0.03); }

.hp-lbl {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: pre;
  font-weight: 600;
  font-size: calc(15 * var(--s) * var(--fit, 1));
  line-height: 1.1;
  color: var(--hp-key-label);
}
.hp-lbl.small { font-size: calc(13 * var(--s) * var(--fit, 1)); }
.hp-lbl.big { font-weight: 500; font-size: calc(21 * var(--s) * var(--fit, 1)); }

/* ---------- Texteingabe (ALPHA, Namen) über Schnellknöpfen und oberster Reihe ---------- */
.hp-textbar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 5;
  min-height: calc(80 * var(--v) + 15 * var(--s));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: calc(8 * var(--s));
  background: linear-gradient(#3B3936, #2A2927);
  box-shadow: inset 0 0 0 1px var(--hp-key-edge), 0 3px 10px rgba(0, 0, 0, 0.5);
}
.hp-tb-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
}
.hp-tb-title {
  flex: none;
  font-family: var(--mono);
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--hp-shift-label);
}
.hp-tb-hint {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(244, 242, 236, 0.62);
}
.hp-tb-row { display: flex; align-items: stretch; gap: 6px; }
.hp-tb-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  margin: 0;
  padding: 6px 10px;
  border: 1px solid var(--hp-bezel);
  border-radius: 6px;
  background: linear-gradient(var(--hp-lcd), var(--hp-lcd-shade));
  color: var(--hp-lcd-ink);
  font-family: var(--mono);
  font-size: 17px;                    /* ≥ 16 px: iOS zoomt beim Fokussieren nicht */
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
.hp-tb-input::placeholder { color: rgba(28, 35, 23, 0.45); }
.hp-tb-input:focus { box-shadow: 0 0 0 2px rgba(242, 164, 68, 0.75); }
.hp-tb-btn {
  flex: none;
  min-width: 50px;
  min-height: 40px;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: linear-gradient(var(--hp-key-top), var(--hp-key-bottom));
  box-shadow: inset 0 0 0 1px var(--hp-key-edge);
  color: var(--hp-key-label);
  font-weight: 700;
  font-size: 15px;
}
.hp-tb-btn.ok {
  background: linear-gradient(var(--hp-shift-key), var(--hp-shift-key-dark));
  color: #1F1E1C;
  font-size: 20px;
}
.hp-tb-btn:active { filter: brightness(0.85); transform: translateY(1px); }

/* ---------- Hilfe- und Display-Blätter (außerhalb des Rechners, Tokens aus app.css) ---------- */
.hp-help { font-size: 15.5px; line-height: 1.4; }
.hp-help p { margin: 6px 0; }
.hp-help-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--line);
}
.hp-help-row:last-of-type { border-bottom: 0; }
.hp-help-text { flex: 1; min-width: 0; }
.hp-help-sub { margin-top: 2px; font-size: 13px; color: var(--muted); }
.hp-help-hw { margin-top: 3px; font-size: 13px; color: var(--muted); font-family: var(--mono); }
.hp-help-note { margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.hp-help .field { margin: 6px 0 4px; }
.hp-chip {
  flex: none;
  min-width: 60px;
  min-height: 32px;
  padding: 6px 9px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
  color: #F4F2EC;
  background: linear-gradient(#4B4946, #353431);
  box-shadow: inset 0 0 0 1px #0F0E0D;
}
.hp-chip.digit { background: linear-gradient(#5A5854, #42403D); }
.hp-chip.shiftkey { background: linear-gradient(#E8912D, #C8741A); }
.hp-chip.shifted { background: #2A2927; color: #F2A444; font-size: 14px; }
.hp-chip.quick { background: linear-gradient(#3B3936, #2A2927); color: #F2A444; font-size: 13px; }
.hp-chip.soft {
  background: #1C2317;
  color: #C5CDB2;
  font-family: var(--mono);
  font-size: 14px;
  border-radius: 3px;
  box-shadow: none;
}
.hp-xval { font-size: 19px; margin: 4px 0 8px; word-break: break-all; }