/* WideMath TI-36X Pro style calculator (/ti-36x-pro-calculator/).
   An original keypad drawing: the key order and labels follow the handheld,
   the colours and shapes are WideMath's own. Every selector starts with .ti36. */

.ti36 { display: grid; grid-template-columns: minmax(300px, 410px) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 860px) { .ti36 { grid-template-columns: minmax(0, 1fr); gap: 14px; } }

/* ---- body ---------------------------------------------------------------- */
.ti36 .ti36-calc { background: linear-gradient(180deg, #e7ecf2 0%, #d5dde7 100%); border: 1px solid #c3ccd8; border-radius: 26px 26px 34px 34px;
  padding: 12px 14px 18px; box-shadow: 0 1px 0 #fff inset, 0 10px 26px rgba(15, 23, 42, .12); outline: none; max-width: 410px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.ti36 .ti36-calc:focus-visible { box-shadow: 0 0 0 3px #16a34a, 0 10px 26px rgba(15, 23, 42, .12); }
.ti36 .ti36-plate { display: flex; justify-content: space-between; align-items: baseline; padding: 0 6px 8px; font: 700 .78rem/1 'Segoe UI', system-ui, sans-serif; color: #334155; }
.ti36 .ti36-plate .ti36-brand { color: #15803d; letter-spacing: .02em; }

/* ---- display --------------------------------------------------------------- */
.ti36 .ti36-lcd { background: #dfe8d9; border: 2px solid #8f9aa7; border-radius: 10px; padding: 4px 8px 6px; box-shadow: inset 0 2px 6px rgba(15, 23, 42, .18); margin-bottom: 14px; }
.ti36 .ti36-flags { display: flex; gap: 8px; justify-content: flex-end; min-height: 14px; font: 700 .62rem/14px 'Segoe UI', system-ui, sans-serif; color: #3f4b3a; letter-spacing: .04em; }
.ti36 .ti36-flags .on2 { color: #fff; background: #15803d; border-radius: 3px; padding: 0 4px; margin-right: auto; }
.ti36 .ti36-scr { height: 168px; overflow: hidden; font: 1.08rem/1.5 'Cambria Math', Cambria, 'Times New Roman', serif; color: #17202a; position: relative; scroll-behavior: auto; }
.ti36 .ti36-scr.v-home { display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: none; }
.ti36 .ti36-scr.v-home::-webkit-scrollbar { display: none; }
.ti36 .ti36-scr.v-home > * { flex-shrink: 0; }
.ti36 .ti36-scr.v-home > :first-child { margin-top: auto; }
.ti36 .ti36-ent, .ti36 .ti36-cur { text-align: left; padding: 1px 2px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.ti36 .ti36-rl { text-align: right; padding: 0 2px 2px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.ti36 .ti36-ent .note { float: right; font-size: .8em; color: #485544; }
.ti36 .ti36-ent::-webkit-scrollbar, .ti36 .ti36-rl::-webkit-scrollbar, .ti36 .ti36-cur::-webkit-scrollbar { display: none; }
.ti36 .inv { background: #17202a; color: #dfe8d9; border-radius: 2px; }
.ti36 .inv * { color: inherit; }
.ti36 .mp { display: inline-block; white-space: nowrap; }

/* MathPrint layout */
.ti36 .fr { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 2px; font-size: .92em; }
.ti36 .fr > .n { border-bottom: 1.5px solid currentColor; padding: 0 2px 1px; display: block; text-align: center; white-space: nowrap; }
.ti36 .fr > .d { padding: 1px 2px 0; display: block; text-align: center; white-space: nowrap; }
.ti36 .fr.sm { font-size: .78em; }
.ti36 .mx { display: inline-flex; align-items: center; vertical-align: middle; }
.ti36 sup { font-size: .72em; vertical-align: .6em; line-height: 0; }
.ti36 sub { font-size: .7em; vertical-align: -.35em; line-height: 0; }
.ti36 .rt { display: inline-flex; align-items: flex-end; margin: 0 1px; vertical-align: middle; }
.ti36 .rt .rs { font-size: 1.05em; margin-right: -1px; }
.ti36 .rt .rr { border-top: 1.5px solid currentColor; padding: 1px 2px 0 1px; display: block; white-space: nowrap; }
.ti36 .rt .ri { margin-right: -5px; align-self: flex-start; }
.ti36 .ab { border-left: 1.5px solid currentColor; border-right: 1.5px solid currentColor; padding: 0 3px; margin: 0 2px; display: inline-block; }
.ti36 .big { display: inline-block; white-space: nowrap; }
.ti36 .lims { display: inline-flex; flex-direction: column; align-items: center; font-size: .7em; line-height: 1.05; margin-right: 1px; vertical-align: middle; }
.ti36 .lims .sym { font-size: 1.9em; line-height: .95; }
.ti36 .dd { display: inline-block; white-space: nowrap; }
.ti36 .dd .at { display: inline-block; }
.ti36 .v, .ti36 i { font-style: italic; }
.ti36 .ng { font-size: .78em; vertical-align: .3em; }
.ti36 .op { margin: 0 1px; }
.ti36 .ee { font-size: .78em; margin: 0 1px; }
.ti36 .kw { font-family: 'Segoe UI', system-ui, sans-serif; font-size: .9em; }
.ti36 .ph { font-weight: 700; }
.ti36 .cv, .ti36 .un { font-family: 'Segoe UI', system-ui, sans-serif; font-size: .82em; }
.ti36 .bs { font-size: .78em; }
.ti36 .box { display: inline-block; min-width: .62em; height: .95em; border: 1px dashed #5b6b57; vertical-align: middle; margin: 0 1px; position: relative; }
.ti36 .box.on { border-color: #17202a; }
.ti36 .c { display: inline-block; width: 2px; height: 1.05em; background: #17202a; vertical-align: middle; margin: 0 -1px; animation: ti36-blink 1s steps(1) infinite; }
.ti36 .c.ins { height: 3px; width: .55em; vertical-align: -.15em; margin: 0; }
.ti36 .box .c { position: absolute; left: 0; top: 0; height: 100%; margin: 0; }
.ti36 .blk { background: #17202a; color: #dfe8d9; animation: ti36-blk 1s steps(1) infinite; }
@keyframes ti36-blink { 50% { opacity: 0; } }
@keyframes ti36-blk { 50% { background: transparent; color: inherit; } }
@media (prefers-reduced-motion: reduce) { .ti36 .c, .ti36 .blk { animation: none; } }

/* menus, mode screen, solver screens */
.ti36 .ti36-scr.v-menu, .ti36 .ti36-scr.v-mode, .ti36 .ti36-scr.v-lines, .ti36 .ti36-scr.v-err { font: 600 .9rem/1.6 'Segoe UI', system-ui, sans-serif; overflow-y: auto; scrollbar-width: none; }
.ti36 .ti36-scr.v-lines .ti36-ln { font-family: 'Cambria Math', Cambria, serif; font-size: 1.02rem; font-weight: 400; white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.ti36 .ti36-ln.act::before { content: '\25B8'; font-size: .8em; margin-right: 3px; }
.ti36 .ti36-mhead { display: flex; gap: 10px; margin-bottom: 2px; }
.ti36 .ti36-mhead span { padding: 0 4px; }
.ti36 .ti36-mi { padding: 0 4px; }
.ti36 .ti36-more { position: absolute; right: 4px; bottom: 0; font-size: .7rem; }
.ti36 .ti36-mrow { display: flex; flex-wrap: wrap; gap: 2px 7px; }
.ti36 .ti36-mrow span { padding: 0 3px; }
.ti36 .ti36-mrow .cur { outline: 1.5px solid #17202a; outline-offset: 0; animation: ti36-blink 1s steps(1) infinite; }
.ti36 .ti36-mrow .inv.cur { outline-color: #15803d; }
.ti36 .opt { padding: 0 3px; }
.ti36 .opt.on { background: #17202a; color: #dfe8d9; border-radius: 2px; }
.ti36 .ti36-foot { display: flex; gap: 12px; margin-top: 4px; font: 700 .78rem/1.6 'Segoe UI', system-ui, sans-serif; }
.ti36 .ti36-foot span { padding: 0 4px; }
.ti36 .tc { display: inline-block; min-width: 33%; padding-right: 6px; }
.ti36 .tc.on { background: #17202a; color: #dfe8d9; }
.ti36 .cell { display: inline-flex; min-width: 1.4em; justify-content: flex-end; border-bottom: 1px dotted #5b6b57; margin: 0 2px; }
.ti36 .cell.act { border-bottom: 2px solid #17202a; }
.ti36 .hint { font: 400 .78rem/1.4 'Segoe UI', system-ui, sans-serif; color: #485544; }
.ti36 .ti36-errs { display: flex; flex-direction: column; gap: 4px; }
.ti36 .ti36-errs b { font-size: 1rem; }
.ti36 .ti36-errs span { font-weight: 400; font-size: .84rem; line-height: 1.35; }

/* ---- keypad ------------------------------------------------------------------- */
.ti36 .ti36-pad { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px 8px; position: relative; }
.ti36 .tk { appearance: none; border: 0; border-radius: 10px; min-height: 46px; padding: 0 2px 5px; cursor: pointer; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  font: 600 .9rem/1.1 'Segoe UI', system-ui, sans-serif; color: #fff; background: #334155; box-shadow: 0 2px 0 #1e293b, 0 3px 6px rgba(15, 23, 42, .18);
  transition: transform 60ms ease, box-shadow 60ms ease, background 120ms ease; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ti36 .tk .s2 { display: block; min-height: 12px; font: 600 .6rem/1.1 'Segoe UI', system-ui, sans-serif; color: #15803d; white-space: nowrap; margin: -1px -6px 3px; letter-spacing: -.01em; text-shadow: none; }
.ti36 .tk .p { display: inline-block; white-space: nowrap; }
.ti36 .tk .p small { font-size: .62rem; font-weight: 600; opacity: .8; margin-left: 2px; }
.ti36 .tk .p sup { color: inherit; font-size: .66em; vertical-align: .55em; }
.ti36 .tk .p i { font-family: 'Cambria Math', Cambria, serif; }
.ti36 .tk .nd { display: inline-flex; flex-direction: column; align-items: center; font-size: .66rem; line-height: 1; }
.ti36 .tk .nd span:first-child { border-bottom: 1px solid currentColor; padding: 0 1px; }
/* the 2nd label sits above the key face, on the body colour */
.ti36 .tk { position: relative; margin-top: 12px; }
.ti36 .tk .s2 { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); margin: 0; }
.ti36 .tk:hover { background: #475569; }
.ti36 .tk:active, .ti36 .tk.hit { transform: translateY(2px); box-shadow: 0 0 0 #1e293b, 0 1px 2px rgba(15, 23, 42, .2); }
.ti36 .tk:focus-visible, .ti36 .dk:focus-visible, .ti36 .ti36-models button:focus-visible { outline: 2px solid #16a34a; outline-offset: 2px; }
.ti36 .kdig { background: #f8fafc; color: #0f172a; font-size: 1.12rem; box-shadow: 0 2px 0 #94a3b8, 0 3px 6px rgba(15, 23, 42, .12); }
.ti36 .kdig:hover { background: #fff; }
.ti36 .kop { background: #64748b; font-size: 1.15rem; }
.ti36 .kop:hover { background: #75839a; }
.ti36 .k2 { background: #15803d; box-shadow: 0 2px 0 #14532d, 0 3px 6px rgba(15, 23, 42, .18); }
.ti36 .k2:hover { background: #16a34a; }
.ti36.sec .k2 { background: #22c55e; color: #052e16; }
.ti36.sec .tk .s2 { color: #fff; background: #15803d; border-radius: 3px; padding: 0 3px; }
.ti36 .kent { background: #0f172a; }
.ti36 .kclr { background: #475569; }

/* arrow pad: columns 4-5, rows 1-2 */
.ti36 .ti36-dpad { grid-column: 4 / span 2; grid-row: 1 / span 2; position: relative; margin: 6px 6px 0; height: 104px; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #f1f5f9 0 22%, #cbd5e1 23% 100%); box-shadow: 0 2px 0 #94a3b8, 0 4px 10px rgba(15, 23, 42, .15); }
.ti36 .dk { position: absolute; appearance: none; border: 0; background: transparent; color: #1e293b; font-size: .82rem; cursor: pointer; width: 44px; height: 40px; border-radius: 10px; touch-action: manipulation; }
.ti36 .dk:hover { background: rgba(21, 128, 61, .14); }
.ti36 .dk.hit, .ti36 .dk:active { background: rgba(21, 128, 61, .3); }
.ti36 .dk.up { top: 0; left: 50%; transform: translateX(-50%); }
.ti36 .dk.down { bottom: 0; left: 50%; transform: translateX(-50%); }
.ti36 .dk.left { left: 0; top: 50%; transform: translateY(-50%); }
.ti36 .dk.right { right: 0; top: 50%; transform: translateY(-50%); }

/* ---- side panel --------------------------------------------------------------- */
.ti36 .ti36-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ti36 .ti36-models { width: 100%; }
.ti36 .ti36-models button { flex: 1 1 0; min-height: 40px; padding: 0 10px; font-size: .8rem; letter-spacing: 0; }
.ti36 .ti36-out { font-size: 1.25rem; }
.ti36 .ti36-out .ti36-res { display: block; overflow-wrap: anywhere; }
.ti36 .ti36-out .ti36-dec { display: block; font: .86rem 'Segoe UI', system-ui, sans-serif; color: #64748b; margin-top: 2px; }
.ti36 .ti36-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.ti36 .ti36-btns .wm-btn { min-height: 40px; }
.ti36 .ti36-log { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px 12px; }
.ti36 .ti36-log small { display: block; font: 600 .78rem 'Segoe UI', system-ui, sans-serif; color: #64748b; margin-bottom: 6px; }
.ti36 .ti36-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ti36 .ti36-chips .ch { font: 600 .78rem/1 'Segoe UI', system-ui, sans-serif; padding: 5px 7px; border-radius: 6px; background: #334155; color: #fff; }
.ti36 .ti36-chips .ch.c2 { background: #15803d; }
.ti36 .ti36-chips .ch.cs { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.ti36 .ti36-chips .none { color: #94a3b8; font-size: .85rem; }
.ti36 .ti36-help { font-size: .88rem; color: #475569; }
.ti36 .ti36-help p { margin: 8px 0 0; line-height: 1.7; }
.ti36 .ti36-help kbd { font: .78rem 'Segoe UI', system-ui, sans-serif; border: 1px solid #cbd5e1; border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; background: #fff; }
@media (max-width: 400px) {
  .ti36 .ti36-calc { padding: 10px 9px 14px; border-radius: 20px; }
  .ti36 .ti36-pad { gap: 9px 6px; }
  .ti36 .tk { min-height: 42px; font-size: .82rem; }
  .ti36 .tk .s2 { font-size: .54rem; }
  .ti36 .tk .p small { font-size: .56rem; }
  .ti36 .ti36-dpad { margin: 4px 2px 0; height: 96px; }
}
/* compact version inside the /embed/ iframe */
.ti36.ti36-embed .ti36-log, .ti36.ti36-embed .ti36-help { display: none; }
.ti36.ti36-embed .ti36-scr { height: 132px; }
.ti36.ti36-embed .ti36-lcd { margin-bottom: 8px; }
.ti36.ti36-embed .tk { min-height: 40px; }
.ti36.ti36-embed .ti36-pad { gap: 6px 7px; }
.ti36.ti36-embed .ti36-dpad { height: 90px; margin-top: 4px; }
@media print { .ti36 .ti36-pad, .ti36 .ti36-btns, .ti36 .ti36-help, .ti36 .ti36-models { display: none; } }