/* ==========================================================================
   Calcolatrice, convertitore e costanti (js/calc.js)
   --cl-s: scala di tasti e display, calcolata da js/calc.js sulla misura della finestra
   ========================================================================== */
.calc-btn { margin-right: 6px; }
.cl-panel {
  --cl-s: 1;
  position: fixed; z-index: 380; right: calc(16px + var(--sar, 0px)); top: calc(76px + var(--sat, 0px)); bottom: calc(16px + var(--sab, 0px)); width: min(400px, calc(100vw - 32px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--raised); color: var(--ink); border: 1px solid var(--stroke-2); border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
  opacity: 0; transform: translateX(16px) scale(0.98); transform-origin: top right; transition: opacity 0.16s, transform 0.22s var(--ease);
}
.cl-panel.in { opacity: 1; transform: none; }
.cl-panel[hidden] { display: none; }
/* telefono: un foglio in basso (si può comunque spostare e ridimensionare) */
@media (max-width: 700px) {
  .cl-panel {
    left: calc(8px + env(safe-area-inset-left, 0px)); right: calc(8px + env(safe-area-inset-right, 0px)); bottom: calc(8px + var(--sab, 0px)); top: auto; width: auto;
    height: min(580px, calc(100vh - var(--sat, 0px) - var(--sab, 0px) - 16px));
    transform: translateY(24px); transform-origin: bottom center;
  }
}
/* schermo basso (telefono in orizzontale): tutta l'altezza, lontano dal notch */
@media (max-height: 520px) and (min-width: 701px) {
  .cl-panel { top: calc(8px + var(--sat, 0px)); bottom: calc(8px + var(--sab, 0px)); right: calc(8px + env(safe-area-inset-right, 0px)); }
}
/* spostata o ridimensionata: posizione e misure arrivano da js/calc.js */
.cl-panel.cl-free { transform-origin: center; }
.cl-panel.cl-moving { transition: none; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4); }
.cl-dragging, .cl-dragging * { user-select: none !important; -webkit-user-select: none !important; cursor: grabbing !important; }

/* maniglia per spostare e angolo per ridimensionare */
.cl-grab { flex: none; display: grid; place-items: center; height: 14px; margin-bottom: -6px; cursor: grab; touch-action: none; }
.cl-grab span { width: 36px; height: 4px; border-radius: 2px; background: var(--stroke-2); transition: background 0.12s; }
.cl-grab:hover span, .cl-moving .cl-grab span { background: var(--ink-3); }
.cl-head { touch-action: none; cursor: grab; }
.cl-head button { cursor: pointer; }
.cl-grip {
  position: absolute; right: 3px; bottom: 3px; width: 18px; height: 18px; cursor: nwse-resize; touch-action: none; z-index: 2;
  background: linear-gradient(135deg, transparent 0 52%, var(--ink-3) 52% 58%, transparent 58% 70%, var(--ink-3) 70% 76%, transparent 76%);
  opacity: 0.45; transition: opacity 0.12s;
}
.cl-grip:hover, .cl-moving .cl-grip { opacity: 0.9; }
@media (pointer: coarse) { .cl-grip { width: 26px; height: 26px; background-size: 18px 18px; background-position: right bottom; background-repeat: no-repeat; } }

/* ridotta a icona: una pillola con l'ultimo risultato, da spostare e toccare per riaprire */
.cl-pill {
  position: fixed; z-index: 380; left: 0; top: 0; display: flex; align-items: center; max-width: min(260px, calc(100vw - 32px));
  background: var(--raised); color: var(--ink); border: 1px solid var(--stroke-2); border-radius: 999px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  touch-action: none; cursor: grab; animation: cl-pop 0.2s var(--ease);
}
.cl-pill[hidden], .as-open .cl-pill { display: none; }
.cl-pill-main { display: flex; align-items: center; gap: 8px; min-width: 0; height: 44px; padding: 0 6px 0 14px; border: 0; background: transparent; color: inherit; font: inherit; font-size: 15px; font-weight: 600; cursor: inherit; touch-action: none; }
.cl-pill-main svg { width: 20px; height: 20px; flex: none; }
.cl-pill-t { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.cl-pill-x { display: grid; place-items: center; width: 32px; height: 32px; margin-right: 6px; flex: none; padding: 0; border: 0; border-radius: 50%; background: var(--fill); color: var(--ink-3); cursor: pointer; }
.cl-pill-x svg { width: 14px; height: 14px; }
.cl-pill-x:hover { background: var(--fill-2); color: var(--ink); }
@keyframes cl-pop { from { opacity: 0; transform: scale(0.9); } }
@media (prefers-reduced-motion: reduce) { .cl-pill { animation: none; } }

.cl-head { display: flex; align-items: center; gap: 4px; padding: 6px 8px 8px 12px; border-bottom: 1px solid var(--stroke); }
.cl-tabs { flex: 1; min-width: 0; display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--fill); }
.cl-tabs button { flex: 1; min-width: 0; padding: 0 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; height: 32px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-3); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.cl-tabs button.active { background: var(--raised); color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); }
.cl-ib { display: grid; place-items: center; width: 34px; height: 34px; flex: none; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--ink-3); cursor: pointer; }
.cl-ib svg { width: 18px; height: 18px; }
.cl-ib:hover { background: var(--fill-2); color: var(--ink); }
.cl-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 10px 12px 16px; gap: calc(8px * var(--cl-s)); overflow: auto; }
.cl-pane[hidden] { display: none; }

/* calcolatrice */
.cl-hist { flex: 1; min-height: calc(80px * var(--cl-s)); overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 2px; }
.cl-hello { margin: auto 0; color: var(--ink-3); font-size: 13.5px; line-height: 1.55; text-align: center; padding: 0 8px; }
.cl-row { display: grid; justify-items: end; gap: 1px; padding: 6px 8px; border-radius: 10px; }
.cl-row:hover { background: var(--fill); }
.cl-row button { border: 0; background: transparent; padding: 0; font: inherit; cursor: pointer; text-align: right; max-width: 100%; overflow-wrap: anywhere; }
.cl-expr { font: 500 calc(14px * var(--cl-s))/1.4 'SF Mono', ui-monospace, Menlo, monospace !important; color: var(--ink-3); }
.cl-row .cl-res { font-size: calc(20px * var(--cl-s)); font-weight: 650; color: var(--ink); }
.cl-row.err .cl-res { font-size: 13.5px; font-weight: 500; color: var(--ko); }
.cl-inrow { display: flex; gap: 6px; }
.cl-in { flex: 1; min-width: 0; height: calc(46px * var(--cl-s)); padding: 0 12px; border: 1px solid var(--stroke-2); border-radius: 12px; background: var(--fill); color: var(--ink); font: 500 max(16px, calc(18px * var(--cl-s)))/1 'SF Mono', ui-monospace, Menlo, monospace; outline: none; }
.cl-in:focus { border-color: var(--ink-3); }
.cl-mode { flex: none; height: calc(46px * var(--cl-s)); padding: 0 10px; border: 1px solid var(--stroke-2); border-radius: 12px; background: transparent; color: var(--ink-2); font: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; }
.cl-live { margin: -2px 4px 0; min-height: calc(18px * var(--cl-s)); text-align: right; font-size: calc(14px * var(--cl-s)); color: var(--ink-3); }
.cl-keys { display: grid; grid-template-columns: repeat(6, 1fr); gap: calc(5px * var(--cl-s)); }
.cl-keys button { height: calc(40px * var(--cl-s)); border: 0; border-radius: calc(10px * var(--cl-s)); background: var(--fill-2); color: var(--ink); font: 500 calc(15px * var(--cl-s))/1 -apple-system, system-ui, sans-serif; cursor: pointer; transition: transform 0.1s, background 0.12s; touch-action: manipulation; }
.cl-keys button.num { background: var(--fill-3); font-size: calc(17px * var(--cl-s)); font-weight: 600; }
.cl-keys button.eq { background: var(--solid); color: var(--on-solid); font-size: calc(20px * var(--cl-s)); }
.cl-keys button.danger { color: var(--ko); }
.cl-keys button:active { transform: scale(0.93); }

/* convertitore */
.cl-cats { display: flex; flex-wrap: wrap; gap: 5px; }
.cl-cats button { padding: 5px 10px; border: 1px solid var(--stroke-2); border-radius: 999px; background: transparent; color: var(--ink-2); font: inherit; font-size: 13px; cursor: pointer; }
.cl-cats button.active { background: var(--solid); color: var(--on-solid); border-color: transparent; }
.cl-conv { display: grid; grid-template-columns: 1fr 1fr auto 1fr; gap: 6px; align-items: center; margin-top: 4px; }
.cl-conv input, .cl-conv select { min-width: 0; height: 42px; padding: 0 10px; border: 1px solid var(--stroke-2); border-radius: 11px; background: var(--fill); color: var(--ink); font: inherit; font-size: 16px; }
.cl-cv-out { margin: 6px 2px; font-size: 16px; color: var(--ink-2); overflow-wrap: anywhere; }
.cl-cv-out b { color: var(--ink); font-size: 20px; }
.cl-cv-all { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--stroke); }
.cl-cv-all li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--stroke); font-size: 14px; }
.cl-cv-all li span { color: var(--ink-3); }

/* costanti */
.cl-search { height: 40px; padding: 0 12px; border: 1px solid var(--stroke-2); border-radius: 11px; background: var(--fill); color: var(--ink); font: inherit; font-size: 16px; }
.cl-consts { margin: 0; padding: 0; list-style: none; }
.cl-consts button { display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto; gap: 1px 10px; width: 100%; padding: 8px 6px; border: 0; border-bottom: 1px solid var(--stroke); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.cl-consts button:hover { background: var(--fill); }
.cl-sym { grid-row: span 2; align-self: center; font: 700 15px/1 'SF Mono', ui-monospace, Menlo, monospace; color: var(--ink); }
.cl-cname { font-size: 14px; }
.cl-cval { font-size: 13px; color: var(--ink-3); }