/* GATE-style virtual calculator (practice version), /gate-virtual-calculator/.
   Every selector starts with .wm-gate. The keypad keeps the exam's key order:
   a 6-column function block beside a 5-column number block on a laptop,
   stacked (functions above numbers) on a phone. Original styling in the site
   palette; nothing here copies the exam software's look. */

.wm-gate { --g-key: 34px; --g-gap: 6px; color: var(--wm-text, #334155); }
.wm-gate [hidden] { display: none !important; }

/* ---- tool bar: exam mode and timer ---------------------------------------- */
.wm-gate-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 12px; min-height: 40px; }
.wm-gate-switch { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; color: var(--wm-ink, #0f172a); cursor: pointer; font-size: .95rem; min-height: 40px; }
.wm-gate-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wm-gate-track { position: relative; width: 42px; height: 24px; border-radius: 999px; background: #cbd5e1; transition: background 150ms; flex: none; }
.wm-gate-track::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.3); transition: transform 150ms; }
.wm-gate-switch input:checked + .wm-gate-track { background: var(--wm-green, #15803d); }
.wm-gate-switch input:checked + .wm-gate-track::after { transform: translateX(18px); }
.wm-gate-switch input:focus-visible + .wm-gate-track { outline: 2px solid var(--wm-green-2, #16a34a); outline-offset: 2px; }
.wm-gate-timer { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wm-gate-timer label { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 600; }
.wm-gate-timer .wm-field { width: 74px; min-height: 40px; }
.wm-gate-timer .wm-btn { min-height: 40px; }
.wm-gate-clock { font: 700 1.15rem/1 'Segoe UI', system-ui, sans-serif; font-variant-numeric: tabular-nums; color: var(--wm-ink, #0f172a);
  background: #fff; border: 1px solid var(--wm-line, #e2e8f0); border-radius: 8px; padding: 9px 12px; min-width: 76px; text-align: center; }
.wm-gate-clock.is-up { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }
.wm-gate-examnote { font-size: .86rem; color: var(--wm-mute, #64748b); }

/* ---- layout ----------------------------------------------------------- */
.wm-gate-grid { display: grid; grid-template-columns: minmax(0, 500px) minmax(0, 1fr); gap: 22px; align-items: start; }
.wm-gate-side { min-width: 0; }

/* ---- the calculator ---------------------------------------------------- */
.wm-gate-calc { position: relative; background: #eef2f6; border: 1px solid #cbd5e1; border-radius: 14px; padding: 10px 12px 14px;
  box-shadow: 0 1px 3px rgba(15,23,42,.08); user-select: none; -webkit-user-select: none; }
.wm-gate.is-exam .wm-gate-calc { box-shadow: 0 0 0 2px var(--wm-green, #15803d), 0 1px 3px rgba(15,23,42,.08); }
.wm-gate-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; font: 700 .86rem/1.2 'Segoe UI', system-ui, sans-serif; color: #475569; }
.wm-gate-guidebtn { appearance: none; border: 1px solid #cbd5e1; background: #fff; color: var(--wm-green, #15803d); border-radius: 999px;
  font: 600 .8rem/1 'Segoe UI', system-ui, sans-serif; padding: 7px 12px; min-height: 32px; cursor: pointer; }
.wm-gate-guidebtn:hover { background: var(--wm-green-bg, #f0fdf4); }
.wm-gate-guidebtn:focus-visible { outline: 2px solid var(--wm-green-2, #16a34a); outline-offset: 2px; }

.wm-gate-screen { background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 6px 10px 8px; margin: 0 0 10px; }
.wm-gate-expr { min-height: 22px; font: 400 .95rem/1.45 'Segoe UI', system-ui, sans-serif; color: #64748b; text-align: right;
  white-space: nowrap; overflow-x: auto; scrollbar-width: thin; font-variant-numeric: tabular-nums; }
.wm-gate-line { display: flex; align-items: baseline; gap: 8px; min-height: 40px; }
.wm-gate-m { flex: none; font: 700 .72rem/1 'Segoe UI', system-ui, sans-serif; color: #fff; background: #475569; border-radius: 4px; padding: 3px 5px; }
.wm-gate-out { display: block; flex: 1; min-width: 0; text-align: right; font: 600 1.7rem/1.3 'Segoe UI', system-ui, sans-serif; color: var(--wm-ink, #0f172a);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.wm-gate-out.is-long { font-size: 1.25rem; }

.wm-gate-keys { display: grid; grid-template-columns: 6fr 5fr; gap: var(--g-gap); }
.wm-gate-sci { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--g-gap); }
.wm-gate-num { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--g-gap); }
.wm-gate-k { appearance: none; height: var(--g-key); min-width: 0; padding: 0 2px; border: 1px solid #b8c2cf; border-bottom-width: 2px; border-radius: 7px;
  background: #fff; color: var(--wm-ink, #0f172a); font: 600 .74rem/1 'Segoe UI', system-ui, sans-serif; cursor: pointer; white-space: nowrap;
  touch-action: manipulation; transition: background 90ms, transform 60ms; }
.wm-gate-k sup, .wm-gate-k sub { font-size: .72em; line-height: 0; }
.wm-gate-k.fn { background: #f8fafc; }
.wm-gate-k.num { font-size: 1rem; }
.wm-gate-k.op { background: #e2e8f0; font-size: 1.1rem; }
.wm-gate-k.mem { background: transparent; color: #475569; font-size: .72rem; }
.wm-gate-k.clr { background: #fee2e2; border-color: #f3a6a6; color: #991b1b; font-size: .95rem; }
.wm-gate-k.eq { grid-row: span 2; height: auto; background: var(--wm-green, #15803d); border-color: #166534; color: #fff; font-size: 1.2rem; }
.wm-gate-k.wide { grid-column: span 2; }
.wm-gate-k:hover { background: var(--wm-green-bg, #f0fdf4); border-color: #86efac; }
.wm-gate-k.clr:hover { background: #fecaca; border-color: #f87171; }
.wm-gate-k.eq:hover { background: #166534; }
.wm-gate-k:active, .wm-gate-k.is-on { transform: translateY(1px); border-bottom-width: 1px; background: #dcfce7; }
.wm-gate-k.eq:active, .wm-gate-k.eq.is-on { background: #14532d; }
.wm-gate-k:focus-visible { outline: 2px solid var(--wm-green-2, #16a34a); outline-offset: 1px; position: relative; z-index: 1; }
.wm-gate-gap { display: block; }
.wm-gate-deg { grid-column: span 2; display: flex; border: 1px solid #b8c2cf; border-radius: 7px; overflow: hidden; background: #fff; height: var(--g-key); }
.wm-gate-deg label { flex: 1; display: flex; cursor: pointer; }
.wm-gate-deg label + label { border-left: 1px solid #b8c2cf; }
.wm-gate-deg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wm-gate-deg span { flex: 1; display: grid; place-items: center; font: 700 .76rem/1 'Segoe UI', system-ui, sans-serif; color: #475569; }
.wm-gate-deg input:checked + span { background: #334155; color: #fff; }
.wm-gate-deg input:focus-visible + span { outline: 2px solid var(--wm-green-2, #16a34a); outline-offset: -3px; }

.wm-gate-guide { background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 10px 14px; font-size: .86rem; line-height: 1.55;
  max-height: 300px; overflow-y: auto; user-select: text; -webkit-user-select: text; }
.wm-gate-guide h3 { margin: 0 0 6px; font-size: .95rem; color: var(--wm-ink, #0f172a); }
.wm-gate-guide ul { margin: 0; padding-left: 18px; }
.wm-gate-guide li { margin: 0 0 6px; }
.wm-gate-toast { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); width: max-content; max-width: 90%; background: var(--wm-ink, #0f172a);
  color: #fff; padding: 8px 14px; border-radius: 8px; font-size: .85rem; text-align: center; z-index: 5; box-shadow: 0 6px 18px rgba(15,23,42,.25); }

/* ---- tips and the key list ------------------------------------------- */
.wm-gate-tip { margin: 0 0 12px; font-size: .92rem; line-height: 1.55; border-radius: 10px; padding: 10px 14px; }
.wm-gate-tip:empty { display: none; }
.wm-gate-tip.is-info { background: var(--wm-green-bg, #f0fdf4); border: 1px solid var(--wm-green-line, #bbf7d0); color: #14532d; }
.wm-gate-tip.is-warn { background: #fffbeb; border: 1px solid #fde68a; color: #78350f; }
.wm-gate-tape { background: #fff; border: 1px solid var(--wm-line, #e2e8f0); border-radius: 12px; padding: 10px 12px; margin: 0 0 14px; }
.wm-gate-tape-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; font: 700 .86rem/1.2 'Segoe UI', system-ui, sans-serif; color: var(--wm-ink, #0f172a); }
.wm-gate-tape-head span { flex: 1 1 auto; }
.wm-gate-tape-head .wm-btn { min-height: 40px; }
.wm-gate-tape-keys, .wm-gate-caps { display: flex; flex-wrap: wrap; gap: 4px; max-height: 132px; overflow-y: auto; margin: 0; }
.wm-gate-cap { display: inline-block; min-width: 26px; text-align: center; padding: 4px 7px; border: 1px solid #cbd5e1; border-bottom-width: 2px; border-radius: 6px;
  background: #f8fafc; font: 600 .82rem/1.2 'Segoe UI', system-ui, sans-serif; color: var(--wm-ink, #0f172a); white-space: nowrap; }
.wm-gate-more, .wm-gate-empty { font-size: .85rem; color: var(--wm-mute, #64748b); align-self: center; }

/* ---- drill -------------------------------------------------------------- */
.wm-gate .wm-gate-h { margin: 0 0 10px; padding: 0; border: 0; font-size: 1.08rem; font-weight: 750; color: var(--wm-ink, #0f172a); letter-spacing: 0; scroll-margin-top: 80px; }
.wm-gate-drill .wm-row { margin: 0 0 10px; }
.wm-gate-drill .wm-btn { min-height: 44px; }
.wm-gate-drill select.wm-field, .wm-gate-drill input.wm-field { min-height: 44px; }
.wm-gate-q { margin: 4px 0 12px; font-size: 1rem; line-height: 1.6; color: var(--wm-ink, #0f172a); }
.wm-gate-unit { font-weight: 500; color: var(--wm-mute, #64748b); }
.wm-gate-pad { display: grid; grid-template-columns: repeat(3, minmax(0, 64px)); gap: 6px; margin: 0 0 10px; }
.wm-gate-pad .wm-btn { justify-content: center; font-size: 1rem; min-height: 44px; }
.wm-gate-verdict:empty { display: none; }
.wm-gate-verdict { margin: 0 0 10px; }
.wm-gate-verdict .wm-result { font: .98rem/1.5 'Segoe UI', system-ui, sans-serif; }
.wm-gate-wrong { background: #fff7ed; border: 1px solid #fed7aa; color: #7c2d12; border-radius: 10px; padding: 10px 14px; font-size: .95rem; line-height: 1.5; }
.wm-gate-sol { margin-top: 4px; }
.wm-gate-sol > summary { padding: 8px 0; min-height: 40px; }
.wm-gate-sol .wm-gate-caps { margin: 6px 0 10px; max-height: none; }
.wm-gate-sol .wm-steps .m { font-size: .95rem; }

/* ---- small screens: stack the blocks, bigger keys ------------------------ */
@media (max-width: 900px) {
  .wm-gate-grid { grid-template-columns: minmax(0, 1fr); }
  .wm-gate-calc { max-width: 520px; width: 100%; margin: 0 auto; box-sizing: border-box; }
}
@media (max-width: 560px) {
  .wm-gate { --g-key: 44px; --g-gap: 6px; }
  .wm-gate-keys { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .wm-gate-gap { display: none; }
  .wm-gate-deg { grid-column: span 5; }
  .wm-gate-k { font-size: .84rem; }
  .wm-gate-k.num { font-size: 1.15rem; }
  .wm-gate-k.mem { font-size: .8rem; }
  .wm-gate-calc { padding: 10px 10px 12px; }
  .wm-gate-out { font-size: 1.5rem; }
  .wm-gate-examnote { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .wm-gate-k, .wm-gate-track, .wm-gate-track::after { transition: none; }
}
@media print {
  .wm-gate-tools, .wm-gate-pad, .wm-gate-tape-head .wm-btn { display: none !important; }
}