/* ============================================================
   Kalkylator — dark mode PWA
   ============================================================ */

[data-theme="dark"], :root{
  --bg:            #000000;
  --key-dark:      #212121;
  /* Funktionsraden överst till vänster — ljusare grå, som Apples miniräknare */
  --key-func:      #48484A;
  /* Apple-orange — solid accentfärg för operatorer och andra UI-element
     som ska följa kalkylatorns operatoraccent. */
  --accent:        #FFB340;
  --text:          #ffffff;
  --text-dim:      #9a9a9e;
  --panel:         #111113;
  --overlay:       rgba(0,0,0,.62);
  --press-overlay: rgba(255,255,255,.16);
  --toast-bg:      rgba(48,48,50,.94);
  --toast-text:    #ffffff;
  --focus:         #ffffff;

  --gap: clamp(9px, 3.1vw, 22px);
  --side: clamp(10px, 3.6vw, 26px);

  /* Höjdbudget för knappsatsen -> ger knappstorlek -> ger max bredd */
  --keypad-h: min(66dvh, 620px);
  --btn: calc((var(--keypad-h) - 4 * var(--gap)) / 5);

  --ease: cubic-bezier(.22,.75,.25,1);
}

[data-theme="light"]{
  --bg:            #f4f4f2;
  --key-dark:      #dededb;
  --key-func:      #c9c9c5;
  --text:          #111111;
  --text-dim:      #6f6f73;
  --panel:         #ffffff;
  --overlay:       rgba(20,20,20,.22);
  --press-overlay: rgba(255,255,255,.42);
  --toast-bg:      rgba(246,246,244,.96);
  --toast-text:    #171717;
  --focus:         #111111;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html,body{
  height:100%;
  background:var(--bg);
  overscroll-behavior:none;
}

body{
  color:var(--text);
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  user-select:none;
  -webkit-user-select:none;
  overflow:hidden;
  position:fixed;
  inset:0;
}

.app{
  height:100dvh;
  min-height:100%;
  position:relative;
  display:flex;
  flex-direction:column;
  padding:
    calc(env(safe-area-inset-top) + 14px)
    calc(env(safe-area-inset-right) + var(--side))
    max(calc(var(--side) + 24px), env(safe-area-inset-bottom))
    calc(env(safe-area-inset-left) + var(--side));
}

/* customize.html är längre än en skärm (knappsats + inställningspanel),
   så till skillnad från huvudkalkylatorn (som medvetet är låst till en
   skärm utan scroll) måste den här sidan kunna scrollas vertikalt. */
body.customize-page{
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  position:static;
}
body.customize-page .app{
  height:auto;
  min-height:100dvh;
  padding-top:calc(env(safe-area-inset-top) + 58px);
}

/* ---------------- Display ---------------- */
.display{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-end;
  text-align:right;
  padding-bottom:clamp(10px, 3.2vh, 30px);
  overflow:hidden;
}
.customize-display[hidden]{ display:none; }
.display-history{
  width:100%;
  font-size:clamp(15px, 4.6vw, 26px);
  line-height:1.25;
  color:var(--text-dim);
  letter-spacing:.01em;
  white-space:nowrap;
  overflow:hidden;
  direction:rtl;
  min-height:1.3em;
  /* Mjuk fade när raden töms (t.ex. reverse: result -> expression via
     backspace) i stället för ett abrupt hopp till opacity:0. */
  transition:opacity 180ms var(--ease);
}
.display-history:empty{ opacity:0; }

.display-main{
  width:100%;
  font-size:var(--main-size, clamp(56px, 17vw, 96px));
  line-height:1.06;
  font-weight:300;
  letter-spacing:-.02em;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  direction:rtl;
}
/* direction:rtl håller höger sida synlig; isolate bevarar teckenordningen */
.display-history > span,
.display-main > span{ direction:ltr; unicode-bidi:isolate; display:inline-block; }
.display-main{ position:relative; }
.display-text{ white-space:nowrap; }
.display-glyph{
  display:inline-block;
  transform:translateX(0);
  will-change:transform, opacity;
}
.display-glyph.is-repositioning{
  transition:transform 160ms var(--ease);
}
.display-glyph.is-new{
  animation:display-glyph-in 160ms var(--ease) both;
}
.display-ghost{
  position:absolute;
  display:inline-block;
  direction:ltr;
  unicode-bidi:isolate;
  pointer-events:none;
  animation:display-glyph-out 210ms var(--ease) both;
  will-change:transform, opacity;
}

.display-main.is-error{ color:#ff6b6b; }

/* Resultatet är tryckbart: klick/tryck kopierar det till clipboard. */
.display-main{
  cursor:pointer;
  transition:opacity 160ms var(--ease), transform 160ms var(--ease);
}
.display-main:focus-visible{
  outline:2px solid #fff;
  outline-offset:6px;
  border-radius:6px;
}
/* Diskret, Apple-lik feedback: mycket kort scale + opacity-dipp, ingen toast. */
.display-main.copied{
  animation:copy-flash 170ms var(--ease) both;
}
@keyframes copy-flash{
  0%{   transform:scale(1);    opacity:1;   }
  45%{  transform:scale(.982); opacity:.72;  }
  100%{ transform:scale(1);    opacity:1;   }
}
@media (prefers-reduced-motion: reduce){
  .display-main.copied{ animation:none; }
}

@keyframes expr-lift{
  from{ transform:translateY(.72em) scale(2.15); opacity:.25; }
  to  { transform:translateY(0)     scale(1);    opacity:1;  }
}
@keyframes result-in{
  from{ transform:translateY(.10em); opacity:.35; }
  to  { transform:translateY(0);     opacity:1;   }
}
.display-history.enter{ animation:expr-lift 220ms var(--ease) both; transform-origin:100% 100%; }
.display-main.enter{ animation:result-in 200ms ease-out both; transform-origin:100% 50%; }

@media (prefers-reduced-motion: reduce){
.display-history.enter,.display-main.enter{ animation:none; }
}

@keyframes display-glyph-in{
  from{ transform:translate(6px, .8em); opacity:0; }
  to{ transform:translate(0, 0); opacity:1; }
}
@keyframes display-glyph-out{
  from{ transform:translateX(0); opacity:1; }
  to{ transform:translateX(22px); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .display-glyph.is-repositioning{ transition:none; }
  .display-glyph.is-new,
  .display-ghost{ animation:none; }
}

.copied-toast{
  position:fixed;
  top:calc(env(safe-area-inset-top) + 14px);
  left:50%;
  z-index:40;
  padding:10px 18px;
  border-radius:999px;
  background:var(--toast-bg);
  color:var(--toast-text);
  font-size:15px;
  font-weight:500;
  line-height:1.15;
  box-shadow:0 12px 34px rgba(0,0,0,.22);
  opacity:0;
  transform:translate(-50%, -15px);
  pointer-events:none;
}
.copied-toast.show{
  animation:copied-toast 1100ms var(--ease) both;
}
@keyframes copied-toast{
  0%{ opacity:0; transform:translate(-50%, -15px); }
  14%{ opacity:1; transform:translate(-50%, 0); }
  82%{ opacity:1; transform:translate(-50%, 0); }
  100%{ opacity:0; transform:translate(-50%, -5px); }
}
@media (prefers-reduced-motion: reduce){
  .copied-toast.show{ animation:none; opacity:1; transform:translate(-50%, 0); }
}

/* ---------------- Keypad ---------------- */
.keypad{
  flex:0 0 auto;
  align-self:center;
  width:min(100%, calc(4 * var(--btn) + 3 * var(--gap)));
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--gap);
  /* Hela knappsatsen flyttad ~20px nedåt som EN sammanhängande grupp.
     .app:s bottom-padding (som redan innehåller env(safe-area-inset-bottom))
     är oförändrad, så knapparna hamnar aldrig bakom home indicator/browser
     chrome — det är bara luften ovanför knappsatsen som ökar. */
  margin-top:20px;
}

.key{
  -webkit-appearance:none; appearance:none;
  border:0;
  aspect-ratio:1 / 1;
  width:100%;
  border-radius:50%;
  background:var(--key-dark);
  color:var(--text);
  font-family:inherit;
  font-weight:400;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  touch-action:none;
  container-type:size;
  display:grid;
  place-items:center;
  transition:transform 140ms var(--ease);
}
.key.func{ background:var(--key-func); }
.key.op{ background:var(--accent); }
.key:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }

.key::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:var(--press-overlay);
  opacity:0;
  pointer-events:none;
  transition:opacity 120ms var(--ease);
}
.key.is-press{ transform:scale(.96); }
.key.is-press::after{ opacity:1; }

/* Etiketter — positionering sköts av JS (drag-selectorn skriver transform
   och opacity direkt, så rörelsen kan följa fingret 1:1). CSS bidrar med
   basläget, transitionen vid release och --oy (optisk centrering).
   AC-läget på delete-knappen positioneras också från JS. */
.key .lbl{
  position:absolute;
  left:0; right:0;
  top:50%;
  display:block;
  text-align:center;
  font-size:42cqh;
  line-height:1;
  transform:translateY(-50%);
  will-change:transform, opacity;
  pointer-events:none;
  white-space:nowrap;
}
.key .lbl-primary,
.key .lbl-top,
.key .lbl-bottom{
  transition:transform 190ms var(--ease), opacity 190ms var(--ease);
}
/* Under draget: ingen transition — rörelsen ska vara 1:1 med fingret */
.key.dragging .lbl-primary,
.key.dragging .lbl-top,
.key.dragging .lbl-bottom{ transition:none; }

/* Sekundär etikett med kortare text (t.ex. AC) */
.key .lbl-top.sec-small,
.key .lbl-bottom.sec-small{ letter-spacing:.01em; }

/* Ikonknapp (backspace) */
.key .lbl svg{
  display:block; margin:0 auto;
  width:.95em; height:.95em;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
/* Operatorglyfer: viewBox 0 0 100 100 motsvarar knappens diameter,
   så 1 enhet = 1 % av knappen. 2.174em av .glyph-storleken (46cqh) = 100cqh. */
.key .lbl.op-glyph svg{
  width:2.174em; height:2.174em;
  fill:currentColor; stroke:none;
}
.key .lbl.op-glyph{ font-size:46cqh; }
.key .lbl.glyph{ font-size:46cqh; }
.key .lbl.root-glyph{ font-size:36cqh; }
.key .lbl.small-text{ font-size:34cqh; }

/* Fallback om container query units saknas */
/* Fallback om container query units saknas */
@supports not (font-size: 1cqh){
  .key .lbl{ font-size:clamp(26px, 8.6vw, 44px); }
  .key .lbl.glyph{ font-size:clamp(28px, 9.4vw, 48px); }
  .key .lbl.op-glyph{ font-size:clamp(28px, 9.4vw, 48px); }
  .key .lbl.root-glyph{ font-size:clamp(22px, 7.4vw, 38px); }
  .key .lbl.small-text{ font-size:clamp(21px, 7vw, 36px); }
}

/* Landskap: pressa ihop displayen */
@media (orientation:landscape) and (max-height:560px){
  :root{ --keypad-h:min(78dvh, 52vw); --gap:clamp(6px,1.4vh,14px); }
  .display{ padding-bottom:6px; }
  .display-main{ font-size:var(--main-size, clamp(34px, 8vh, 60px)); }
  .display-history{ font-size:clamp(13px, 3.2vh, 20px); }
}

/* ---------------- Share-knapp ---------------- */
.share-btn{
  -webkit-appearance:none; appearance:none;
  position:absolute;
  top:calc(env(safe-area-inset-top) + 10px);
  left:calc(env(safe-area-inset-left) + 6px);
  z-index:5;
  width:38px; height:38px;
  display:grid; place-items:center;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--text-dim);
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:background-color 140ms var(--ease), color 140ms var(--ease), transform 140ms var(--ease);
}
.share-btn svg{
  width:19px; height:19px;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.share-btn:hover{ color:var(--text); }
.share-btn:active{ background:rgba(255,255,255,.08); transform:scale(.94); }
.share-btn:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

/* ---------------- Share-overlay / QR ---------------- */
.share-overlay{
  position:fixed;
  inset:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:var(--overlay);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  animation:overlay-in 180ms var(--ease) both;
}
.share-overlay[hidden]{ display:none; }
@keyframes overlay-in{ from{ opacity:0; } to{ opacity:1; } }

.share-modal{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  max-width:min(86vw, 340px);
  padding:28px 24px 22px;
  border-radius:28px;
  background:var(--panel);
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  animation:modal-in 220ms var(--ease) both;
}
@keyframes modal-in{
  from{ transform:scale(.92) translateY(6px); opacity:0; }
  to  { transform:scale(1)    translateY(0);   opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .share-overlay,.share-modal{ animation:none; }
}

.share-close{
  -webkit-appearance:none; appearance:none;
  position:absolute;
  top:10px; right:10px;
  width:32px; height:32px;
  display:grid; place-items:center;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:var(--text-dim);
  cursor:pointer;
  transition:background-color 140ms var(--ease), color 140ms var(--ease);
}
.share-close svg{
  width:15px; height:15px;
  fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round;
}
.share-close:hover{ background:rgba(255,255,255,.16); color:var(--text); }
.share-close:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

/* Vit yta med padding = QR-kodens "quiet zone", för maximal scanbarhet. */
.qr-wrap{
  width:min(62vw, 220px);
  aspect-ratio:1/1;
  padding:14px;
  background:#fff;
  border-radius:16px;
}
.qr-code{ width:100%; height:100%; line-height:0; }
.qr-code svg{ display:block; width:100%; height:100%; }

.share-credit{
  font-size:14px;
  font-weight:400;
  color:var(--text-dim);
  text-align:center;
  letter-spacing:.01em;
}

.copy-url-btn{
  -webkit-appearance:none; appearance:none;
  border:0;
  border-radius:999px;
  background:var(--key-dark);
  color:var(--text);
  font-family:inherit;
  font-size:15px;
  font-weight:500;
  padding:11px 18px;
  cursor:pointer;
  transition:background-color 140ms var(--ease), transform 140ms var(--ease);
}
.copy-url-btn:hover{ background:var(--key-func); }
.copy-url-btn:active{ transform:scale(.97); }
.copy-url-btn:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

/* ---------------- Vänsterhänt läge ----------------
   Ingen CSS-spegling längre — bara operatorkolumnen behöver hamna till
   vänster, och det görs genom att bygga knapparna i den ordningen
   (se buildButtonsFromConfig i app.js). .left-handed-klassen finns kvar
   som en krok ifall något visuellt behöver skilja på läget, men styr
   ingen layout i sig just nu. */

/* ---------------- Anpassa-läge (customize.html) ----------------
   Subtil "jiggle"-animation på knapparna i redigeringsläge, likt
   iOS hemskärm i redigeringsläge, för att visuellt signalera att
   knapparna kan tryckas på för att ändra funktion. */
@keyframes key-jiggle{
  0%{ transform:rotate(-1deg); }
  50%{ transform:rotate(1deg); }
  100%{ transform:rotate(-1deg); }
}
.keypad.edit-mode .key{
  animation:key-jiggle 260ms ease-in-out infinite;
  animation-delay:calc(var(--jiggle-i, 0) * -37ms);
  touch-action:pan-y;
}
@media (prefers-reduced-motion: reduce){
  .keypad.edit-mode .key{ animation:none; }
}

/* Bakåtknapp på customize.html — samma diskreta ikonstil som toppknappen. */
.back-btn{
  -webkit-appearance:none; appearance:none;
  position:absolute;
  top:calc(env(safe-area-inset-top) + 10px);
  left:calc(env(safe-area-inset-left) + 6px);
  z-index:5;
  width:38px; height:38px;
  display:grid; place-items:center;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--text-dim);
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:background-color 140ms var(--ease), color 140ms var(--ease), transform 140ms var(--ease);
}
.back-btn svg{
  width:19px; height:19px;
  fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;
}
.back-btn:hover{ color:var(--text); }
.back-btn:active{ background:rgba(255,255,255,.08); transform:scale(.94); }
.back-btn:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

.customize-title{
  position:absolute;
  top:calc(env(safe-area-inset-top) + 16px);
  left:0; right:0;
  text-align:center;
  font-size:15px;
  font-weight:500;
  color:var(--text-dim);
  pointer-events:none;
}

/* Inställningspanelen under knappsatsen på customize.html */
.settings-panel{
  flex:0 0 auto;
  align-self:center;
  width:min(100%, calc(4 * var(--btn) + 3 * var(--gap)));
  margin:22px 0 8px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.settings-group{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.settings-label{
  font-size:13px;
  font-weight:500;
  color:var(--text-dim);
  letter-spacing:.02em;
  text-transform:uppercase;
}
.segmented{
  display:flex;
  border-radius:12px;
  background:var(--key-dark);
  padding:3px;
  gap:3px;
}
.segmented button{
  -webkit-appearance:none; appearance:none;
  flex:1 1 0;
  border:0;
  background:transparent;
  color:var(--text-dim);
  font-family:inherit;
  font-size:14px;
  padding:9px 6px;
  border-radius:9px;
  cursor:pointer;
  transition:background-color 140ms var(--ease), color 140ms var(--ease);
}
.segmented button.active{ background:var(--accent); color:#111; }

.color-row{
  display:flex;
  align-items:center;
  gap:12px;
}
.color-row input[type="color"]{
  -webkit-appearance:none; appearance:none;
  width:44px; height:44px;
  border:0;
  border-radius:12px;
  background:none;
  padding:0;
  cursor:pointer;
}
.color-row input[type="color"]::-webkit-color-swatch-wrapper{ padding:0; }
.color-row input[type="color"]::-webkit-color-swatch{ border:0; border-radius:12px; }
.color-row span{ font-size:14px; color:var(--text-dim); }

.operator-order{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.operator-order-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:12px;
  background:var(--key-dark);
}
.operator-order-row .op-glyph-wrap{
  width:22px; height:22px;
  display:grid; place-items:center;
  color:var(--text);
}
.operator-order-row .op-glyph-wrap svg{
  width:16px; height:16px;
  fill:currentColor; stroke:none;
}
.operator-order-row .op-name{ flex:1 1 auto; font-size:14px; color:var(--text); }
.operator-order-row .op-move{
  -webkit-appearance:none; appearance:none;
  width:30px; height:30px;
  display:grid; place-items:center;
  border:0;
  border-radius:8px;
  background:rgba(255,255,255,.06);
  color:var(--text-dim);
  cursor:pointer;
  transition:background-color 120ms var(--ease), color 120ms var(--ease), opacity 120ms var(--ease);
}
.operator-order-row .op-move svg{
  width:13px; height:13px;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
.operator-order-row .op-move:hover{ background:rgba(255,255,255,.14); color:var(--text); }
.operator-order-row .op-move:disabled{ opacity:.3; cursor:default; }
.operator-order-row .op-move:disabled:hover{ background:rgba(255,255,255,.06); color:var(--text-dim); }

.settings-action-btn,
.reset-btn{
  -webkit-appearance:none; appearance:none;
  border:0;
  border-radius:14px;
  background:var(--key-dark);
  font-family:inherit;
  font-size:15px;
  font-weight:500;
  padding:13px;
  cursor:pointer;
  transition:background-color 140ms var(--ease);
}
.settings-action-btn{ color:var(--text); }
.reset-btn{ color:#ff6b6b; }
.settings-action-btn:hover,
.reset-btn:hover{ background:var(--key-func); }

/* ---------------- Åtgärdsväljare (tryck på en knapp i edit-läge) ---------------- */
.picker-title{
  font-size:16px;
  font-weight:500;
  color:var(--text);
  text-align:center;
}
.picker-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  width:100%;
}
.picker-field label{
  font-size:12px;
  font-weight:500;
  color:var(--text-dim);
  letter-spacing:.02em;
  text-transform:uppercase;
}
.picker-field select{
  -webkit-appearance:none; appearance:none;
  width:100%;
  border:0;
  border-radius:12px;
  background:var(--key-dark);
  color:var(--text);
  font-family:inherit;
  font-size:15px;
  padding:11px 14px;
  cursor:pointer;
}
.picker-field select:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }