/* The loading screen over the calculator (templates/site/_loader.html); app.js keeps it 6 s on every visit. */
/* ------------------------------------------------------------- loading: a small scientific calculator types 12×(3+4) and shows 84 */
.calc-loading { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 40px 16px 36px; min-height: 420px;
  opacity: 0; animation: cl-in .25s ease forwards; }
/* the calculator is ready but the loading screen stays on top of it until 6 seconds have passed (app.js) */
#calculator:has(> .cl-cover) { position: relative; }
#calculator:has(> .cl-cover:not(.cl-done)) { filter: none !important; }
.calc-loading.cl-cover { position: absolute; inset: 0; z-index: 20; min-height: 0; justify-content: center; padding-block: 16px; background: var(--bg);
  border-radius: 18px; opacity: 1; animation: none; transition: opacity .35s ease; }
.calc-loading.cl-cover.cl-done { opacity: 0; pointer-events: none; }
@keyframes cl-in { to { opacity: 1; } }
/* "تخطّي": small and quiet under the progress bar, only once the calculator is ready underneath */
.cl-skip { display: none; }
.cl-cover .cl-skip { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px;
  font: 600 .78rem/1 var(--site-font); padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--muted);
  cursor: pointer; opacity: .85; transition: color .15s, border-color .15s, opacity .15s; }
.cl-cover .cl-skip::after { content: "‹"; font-size: 1rem; line-height: .6; }
.cl-cover .cl-skip:hover, .cl-cover .cl-skip:focus-visible { color: var(--accent); border-color: var(--accent); opacity: 1; }
.cl-cover .cl-skip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the device: dark rim, graphite face, LCD, dark function keys and cream number keys, like our calculator */
.cl-device { --cl-t: 3s; flex: none; width: 184px; padding: 10px 10px 14px; border-radius: 22px 22px 30px 30px; direction: ltr;
  background: linear-gradient(180deg, #5a5f68 0%, #474b53 45%, #3c4047 100%);
  box-shadow: 0 0 0 5px #26282d, 0 0 0 6px var(--line), inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -2px 2px rgba(0, 0, 0, .3), 0 22px 34px -16px rgba(15, 20, 35, .6); }
.cl-top { display: flex; justify-content: flex-end; height: 9px; margin: 0 4px 7px; }
.cl-solar { display: flex; gap: 1px; padding: 1px; border-radius: 2px; background: #2a1f1d; }
.cl-solar i { width: 8px; background: linear-gradient(180deg, #5a3a33, #3b2722); border-radius: 1px; }
.cl-screen { position: relative; height: 50px; margin-bottom: 11px; padding: 6px 8px 5px; border-radius: 7px; background: #c5d0b0;
  box-shadow: 0 0 0 4px #202226, 0 0 0 5px #5f646d, inset 0 2px 6px rgba(0, 0, 0, .28);
  display: flex; flex-direction: column; justify-content: space-between; color: #1d2a1a; overflow: hidden; }
.cl-ind { position: absolute; top: 3px; left: 8px; font: 700 7px/1 system-ui, sans-serif; opacity: .55; }
.cl-line { display: flex; align-items: center; height: 15px; margin-top: 7px; font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, "DejaVu Sans Mono", monospace; }
.cl-expr { display: inline-block; width: 8ch; overflow: hidden; white-space: nowrap; animation: cl-type var(--cl-t) infinite; }
.cl-caret { width: 1.5px; height: 12px; margin-left: 1px; background: currentColor; opacity: 0; animation: cl-caret var(--cl-t) infinite; }
.cl-res { align-self: flex-end; font: 700 19px/1 "Cambria Math", "STIX Two Math", "Times New Roman", serif; animation: cl-res var(--cl-t) infinite; }
/* one character per key press (0.25 s, then every 0.2 s), = at 1.95 s, the result at 2 s, the screen clears at 2.9 s */
@keyframes cl-type {
  0%, 8.33% { width: 0; opacity: 1; animation-timing-function: steps(8, start); }
  61.67%, 96% { width: 8ch; opacity: 1; }
  100% { width: 8ch; opacity: 0; } }
@keyframes cl-caret { 0%, 64% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes cl-res { 0%, 66% { opacity: 0; transform: translateY(4px); } 70%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }

.cl-fn, .cl-num { display: grid; gap: 5px; }
.cl-fn { grid-template-columns: repeat(6, 1fr); margin-bottom: 9px; }
.cl-num { grid-template-columns: repeat(5, 1fr); gap: 6px 5px; }
.cl-device b { display: flex; align-items: center; justify-content: center; border-radius: 7px; font-weight: 600; user-select: none; }
.cl-fn b { height: 14px; border-radius: 8px; font: 600 6.5px/1 system-ui, sans-serif; color: #e8eaee; background: linear-gradient(180deg, #3a3e45, #2c2f35);
  --cl-sh: 0 1.5px 0 rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .1); box-shadow: var(--cl-sh); }
.cl-num b { height: 18px; font: 600 9.5px/1 system-ui, sans-serif; color: #2a2c30; background: linear-gradient(180deg, #f7f5ef, #dcd9d1);
  --cl-sh: 0 2px 0 #8f8c84, 0 3px 3px rgba(0, 0, 0, .25); box-shadow: var(--cl-sh); }
.cl-num b.cl-op { background: linear-gradient(180deg, #d9d7d1, #bdbab2); }
.cl-num b.cl-sm { font-size: 7px; }
.cl-num b.cl-del { color: #fff; background: linear-gradient(180deg, #ad6556, #8b4a3e); --cl-sh: 0 2px 0 #5c2f27, 0 3px 3px rgba(0, 0, 0, .25); box-shadow: var(--cl-sh); font-size: 8px; }
.cl-num b.cl-eq { color: #fff; background: linear-gradient(180deg, #44484f, #2b2e33); --cl-sh: 0 2px 0 #17181b, 0 3px 3px rgba(0, 0, 0, .25); box-shadow: var(--cl-sh); }
/* each key of the expression is pressed as its character appears */
.cl-device b[class*="cl-p"] { animation: cl-press var(--cl-t) infinite; }
.cl-device b.cl-p1 { animation-delay: .25s; } .cl-device b.cl-p2 { animation-delay: .45s; } .cl-device b.cl-p3 { animation-delay: .65s; }
.cl-device b.cl-p4 { animation-delay: .85s; } .cl-device b.cl-p5 { animation-delay: 1.05s; } .cl-device b.cl-p6 { animation-delay: 1.25s; }
.cl-device b.cl-p7 { animation-delay: 1.45s; } .cl-device b.cl-p8 { animation-delay: 1.65s; } .cl-device b.cl-p9 { animation-delay: 1.95s; }
@keyframes cl-press {
  0%, 3% { transform: translateY(1.5px); filter: brightness(1.12); box-shadow: 0 .5px 0 rgba(0, 0, 0, .4), 0 0 0 1.5px #5eead4, 0 0 8px rgba(94, 234, 212, .55); }
  7%, 100% { transform: none; filter: none; box-shadow: var(--cl-sh); } }

.cl-text { margin: 6px 0 0; font-weight: 600; font-size: 1rem; line-height: 1.4; color: var(--ink); }
.cl-dots i { font-style: normal; animation: cl-dot 1.2s infinite; } .cl-dots i:nth-child(2) { animation-delay: .2s; } .cl-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes cl-dot { 40% { opacity: 1; } 0%, 80%, 100% { opacity: .2; } }
.cl-bar { width: 160px; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.cl-bar span { display: block; width: 40%; height: 100%; border-radius: inherit; background: var(--accent); animation: cl-bar 1.3s ease-in-out infinite; }
@keyframes cl-bar { from { transform: translateX(-110%); } to { transform: translateX(260%); } }
[dir="rtl"] .cl-bar span { animation-name: cl-bar-rtl; } @keyframes cl-bar-rtl { from { transform: translateX(110%); } to { transform: translateX(-260%); } }
/* if the calculator still has not appeared after a while, say so and offer a reload */
.cl-slow { margin: 0; max-width: 300px; text-align: center; font-size: .85rem; color: var(--muted); opacity: 0; height: 0; overflow: hidden; animation: cl-slow 0s linear 12s forwards; }
@keyframes cl-slow { to { opacity: 1; height: auto; } }
/* reduced motion: no typing or key presses; the screen simply shows 12×(3+4) and 84 */
@media (prefers-reduced-motion: reduce) {
  .calc-loading { animation-duration: 0s !important; opacity: 1; }
  .cl-device *, .cl-dots i, .cl-bar span { animation: none !important; }
  .cl-bar span { width: 100%; opacity: .5; }
}