/* Mathematics Graph Plotter */
.gp-grid { display: grid; grid-template-columns: 370px minmax(0, 1fr); gap: 1rem; align-items: start; }

.gp-panel { padding: .9rem; }
.gp-label { display: block; font-size: .8rem; font-weight: 700; color: var(--bs-primary); margin: .6rem 0 .25rem; text-transform: uppercase; letter-spacing: .03em; }
.gp-panel .gp-label:first-child { margin-top: 0; }
.gp-tip { font-size: .85rem; background: #fff7e0; border-left: 3px solid #e0a526; border-radius: 6px; padding: .45rem .6rem; margin: .5rem 0 0; }
.gp-tip[hidden] { display: none; }
.gp-eq-head { display: flex; flex-wrap: wrap; gap: .1rem .6rem; align-items: baseline; margin: .8rem 0 .3rem; }

.gp-eqs { display: grid; gap: .4rem; margin-bottom: .6rem; }
.gp-eq { display: grid; grid-template-columns: 30px 1fr 30px; gap: .35rem; align-items: center; }
.gp-eq.off .gp-input { opacity: .5; }
.gp-dot { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--c); background: var(--c); cursor: pointer; padding: 0; }
.gp-eq.off .gp-dot { background: #fff; }
.gp-input { font-family: Consolas, "Courier New", monospace; font-size: .95rem; }
.gp-eq.bad .gp-input { border-color: #dc2626; }
.gp-del { border: 0; background: transparent; color: #94a3b8; font-size: .9rem; cursor: pointer; }
.gp-del:hover { color: #dc2626; }
.gp-err { grid-column: 2 / 4; font-size: .78rem; color: #b91c1c; margin-top: -.15rem; }
.gp-err[hidden] { display: none; }

.gp-keypad { margin-bottom: .6rem; font-size: .85rem; }
.gp-keypad summary, .gp-settings summary { cursor: pointer; color: var(--bs-primary); font-weight: 600; }
.gp-keys { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.gp-key { min-width: 2.4rem; padding: .3rem .5rem; border: 1px solid var(--pmcq-line, #d7e2e8); background: #fff; border-radius: 8px; font-weight: 600; cursor: pointer; }
.gp-key:hover { background: #eef5f8; }
.gp-settings { margin-top: .5rem; font-size: .9rem; }
.gp-settings label { margin-top: .35rem; }

.gp-param { display: grid; grid-template-columns: 1.6rem 1fr 4.6rem 30px; gap: .45rem; align-items: center; margin-bottom: .25rem; }
.gp-pname { font-family: Georgia, serif; font-style: italic; font-weight: 700; font-size: 1.05rem; text-align: center; }
.gp-pnum { padding: .15rem .35rem; }
.gp-play { border: 1px solid var(--pmcq-line, #d7e2e8); background: #fff; border-radius: 8px; padding: .1rem; cursor: pointer; color: var(--bs-primary); }

.gp-stage { position: relative; background: #fff; border: 1px solid var(--pmcq-line, #d7e2e8); border-radius: 14px; overflow: hidden; }
.gp-canvas { display: block; width: 100%; height: 520px; touch-action: none; cursor: crosshair; outline-offset: -3px; }
.gp-canvas.grab { cursor: grabbing; }
.gp-tools { position: absolute; top: .5rem; right: .5rem; display: flex; flex-direction: column; gap: .3rem; }
.gp-tools button { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--pmcq-line, #d7e2e8); background: rgba(255,255,255,.95); color: #334155; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.gp-tools button:hover { background: #eef5f8; }
.gp-tooltip { position: absolute; pointer-events: none; background: rgba(15,23,42,.92); color: #fff; padding: .35rem .55rem; border-radius: 8px; font-size: .8rem; line-height: 1.4; max-width: 240px; z-index: 3; }
.gp-tooltip[hidden] { display: none; }
.gp-status { display: flex; justify-content: space-between; gap: .5rem; padding: .35rem .75rem; border-top: 1px solid var(--pmcq-line, #d7e2e8); background: #f8fbfc; font-size: .8rem; color: #475569; font-family: Consolas, monospace; flex-wrap: wrap; }

.gp-lower { margin-top: 1rem; padding: 0; overflow: hidden; }
.gp-tabs { display: flex; border-bottom: 1px solid var(--pmcq-line, #d7e2e8); background: #f3f7f9; }
.gp-tabs button { flex: 1; padding: .65rem .5rem; border: 0; background: transparent; font-weight: 600; color: #475569; cursor: pointer; border-bottom: 3px solid transparent; }
.gp-tabs button.on { color: var(--bs-primary); border-bottom-color: var(--bs-primary); background: #fff; }
.gp-tabbody { padding: .9rem; }
.gp-sw { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.gp-krow { cursor: pointer; }
.gp-krow:hover, .gp-krow.on { background: #eef5f8; }
.gp-tbl-form, .gp-geo-form { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: .75rem; }
.gp-tbl-form label, .gp-geo-pt label { font-size: .8rem; color: #6b7b88; display: flex; flex-direction: column; gap: .15rem; }
.gp-tbl-form select { min-width: 12rem; }
.gp-tbl-form input { width: 7rem; }
.gp-geo-pt { display: flex; align-items: flex-end; gap: .5rem; padding: .5rem .75rem; border: 1px solid var(--pmcq-line, #d7e2e8); border-radius: 10px; background: #fafcfd; }
.gp-geo-pt input { width: 6rem; }
.gp-tbl td, .gp-tbl th { font-family: Consolas, monospace; }

/* phones and tablets (kept last so it overrides the desktop rules above) */
@media (max-width: 991px) {
  .gp-grid { grid-template-columns: 1fr; }
  /* on phones the graph stays in view while the sliders and equations below are edited */
  .gp-stage { order: -1; position: sticky; top: 0; z-index: 5; box-shadow: 0 4px 12px rgba(15, 23, 42, .12); }
  .gp-canvas { height: min(42vh, 400px); }
}