/* WideMath tool pages (graphers, solvers) and the calculator's tool dock.
   Loaded after /scientific-calculator/blog/blog.css and /blog/blog.css, so
   the article half of every tool page reuses the guides' typography. This
   file only adds the app shell, the expression list and the tool widgets.
   Palette and type are the site's own: green #15803d, slate text, Segoe UI.
   Labels stay in sentence case on purpose: uppercase turns f(x) into F(X)
   and "from a" into "FROM A", which is wrong maths. */

[hidden] { display: none !important; }

:root {
  --wm-green: #15803d; --wm-green-2: #16a34a; --wm-green-bg: #f0fdf4; --wm-green-line: #bbf7d0;
  --wm-ink: #0f172a; --wm-text: #334155; --wm-mute: #64748b; --wm-line: #e2e8f0; --wm-soft: #f8fafc;
  --wm-err: #b91c1c; --wm-err-bg: #fef2f2; --wm-r: 10px; --wm-fast: 120ms; --wm-mid: 200ms; --wm-ease: cubic-bezier(.2, .7, .2, 1);
  --wm-math: 'Cambria Math', 'Cambria', 'Segoe UI', serif;
}

/* ---- wider nav on tool pages ------------------------------------------- */
body.tool .nav-inner, body.tool .breadcrumb { max-width: 1320px; }
.nav-links a[aria-current="page"] { color: var(--wm-green); font-weight: 600; }
@media (max-width: 720px) {
  .nav-inner { flex-wrap: wrap; gap: 6px 14px; padding: 10px 16px; }
  .nav-links { margin-left: 0; gap: 12px; flex-wrap: wrap; overflow-x: auto; }
}

/* ---- tool header ------------------------------------------------------- */
.tool-head { max-width: 1320px; margin: 0 auto; padding: 18px 24px 10px; display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: baseline; }
.tool-head h1 { font-size: 1.65rem; font-weight: 800; color: var(--wm-ink); margin: 0; letter-spacing: -0.02em; line-height: 1.2; }
.tool-head p { margin: 0; color: var(--wm-mute); font-size: 0.98rem; max-width: 760px; }
@media (max-width: 860px) {
  .tool-head { padding: 12px 14px 8px; }
  .tool-head h1 { font-size: 1.4rem; }
  .tool-head p { font-size: .9rem; line-height: 1.5; }
}

/* ---- app shell: list on the left, canvas on the right ------------------- */
.wm-app { max-width: 1320px; margin: 0 auto 8px; padding: 0 24px; }
.wm-app-grid { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; height: clamp(520px, calc(100dvh - 190px), 860px);
  border: 1px solid var(--wm-line); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.06); }
.wm-side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--wm-line); background: var(--wm-soft); }
.wm-stage { position: relative; min-width: 0; min-height: 0; background: #fff; }
.wm-stage > .wm-plot { position: absolute; inset: 0; }
@media (max-width: 860px) {
  .wm-app { padding: 0 10px; }
  .wm-app-grid { grid-template-columns: 1fr; grid-template-rows: minmax(340px, 58vh) auto; height: auto; }
  .wm-stage { order: -1; height: 58vh; min-height: 340px; }
  .wm-side { border-right: 0; border-top: 1px solid var(--wm-line); max-height: none; }
}

/* ---- buttons ------------------------------------------------------------- */
.wm-side-bar { display: flex; gap: 6px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--wm-line); background: #fff; flex-wrap: wrap; }
.wm-side-bar .sp { flex: 1; }
.wm-btn { appearance: none; border: 1px solid var(--wm-line); background: #fff; color: var(--wm-text); font: 600 0.82rem/1 'Segoe UI', system-ui, sans-serif;
  padding: 8px 11px; min-height: 34px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: background var(--wm-fast) var(--wm-ease), border-color var(--wm-fast) var(--wm-ease), color var(--wm-fast); }
.wm-btn:hover { background: var(--wm-green-bg); border-color: var(--wm-green-line); color: var(--wm-green); }
.wm-btn.primary { background: var(--wm-green); border-color: var(--wm-green); color: #fff; }
.wm-btn.primary:hover { background: #166534; color: #fff; }
.wm-btn[aria-pressed="true"] { background: var(--wm-green-bg); border-color: var(--wm-green-2); color: var(--wm-green); }
.wm-btn svg { width: 16px; height: 16px; flex: none; }
.wm-btn:focus-visible, .wm-field:focus-visible, .wm-chip:focus-visible, .wm-seg button:focus-visible, .wm-fix:focus-visible,
.wm-swatch:focus-visible, .wm-del:focus-visible, .wm-keys button:focus-visible, .wm-slider input:focus-visible, .wm-slider .play:focus-visible,
.wm-matrix input:focus-visible, .wm-pop input:focus-visible, .wm-pop select:focus-visible { outline: 2px solid var(--wm-green-2); outline-offset: 2px; }
/* links on the tool pages and the hub: a clear ring, not the faint default */
.nav a:focus-visible, .breadcrumb a:focus-visible, .content a:focus-visible, .tool-card:focus-visible, footer a:focus-visible, .related-card:focus-visible {
  outline: 2px solid var(--wm-green-2); outline-offset: 3px; border-radius: 4px; }

/* RAD | DEG: both choices visible, the active one filled */
.wm-seg { display: inline-flex; border: 1px solid var(--wm-line); border-radius: 8px; overflow: hidden; background: #fff; }
.wm-seg button { appearance: none; border: 0; background: transparent; color: var(--wm-mute); font: 700 .74rem/1 'Segoe UI', system-ui, sans-serif;
  letter-spacing: .03em; padding: 0 10px; min-height: 32px; cursor: pointer; }
.wm-seg button + button { border-left: 1px solid var(--wm-line); }
.wm-seg button[aria-pressed="true"] { background: var(--wm-green); color: #fff; }
.wm-seg button:not([aria-pressed="true"]):hover { background: var(--wm-green-bg); color: var(--wm-green); }

/* ---- expression list --------------------------------------------------- */
.wm-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.wm-expr { display: grid; grid-template-columns: 34px 1fr 32px; align-items: center; border-bottom: 1px solid var(--wm-line); background: #fff; transition: background var(--wm-fast); }
/* the row you are editing: a green bar and a faint tint, no box around the text */
.wm-expr.sel, .wm-expr:focus-within { box-shadow: inset 3px 0 0 var(--wm-green-2); }
.wm-expr:focus-within { background: #fbfefc; }
.wm-expr.bad { box-shadow: inset 3px 0 0 var(--wm-err); }
.wm-swatch { width: 34px; height: 100%; min-height: 48px; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; padding: 0; }
.wm-swatch i { width: 16px; height: 16px; border-radius: 50%; border: 3px solid currentColor; background: currentColor; display: block; transition: background var(--wm-fast); }
.wm-swatch[aria-pressed="false"] i { background: transparent; opacity: .55; }
.wm-expr input { width: 100%; border: 0; background: transparent; padding: 14px 6px; font: 1.05rem/1.3 var(--wm-math); color: var(--wm-ink); min-width: 0; outline: none; }
.wm-expr input::placeholder { color: #94a3b8; font-style: italic; }
.wm-del { border: 0; background: transparent; color: #94a3b8; font-size: 18px; cursor: pointer; height: 100%; min-height: 44px; }
.wm-del:hover { color: var(--wm-err); }
/* the empty row at the bottom is a place to type, not a line yet */
.wm-expr.empty .wm-swatch i { background: transparent; border-color: #cbd5e1; }
.wm-expr.empty .wm-del { visibility: hidden; }
.wm-msg { grid-column: 2 / 4; font-size: 0.8rem; line-height: 1.4; padding: 0 10px 10px 6px; margin-top: -6px; color: var(--wm-mute); }
.wm-msg.err { color: var(--wm-err); }
.wm-fix { appearance: none; border: 1px solid var(--wm-green-line); background: var(--wm-green-bg); color: var(--wm-green); border-radius: 999px;
  font: 600 .76rem/1 'Segoe UI', system-ui, sans-serif; padding: 5px 10px; margin-left: 2px; cursor: pointer; vertical-align: middle; }
.wm-fix:hover { background: #dcfce7; }
.wm-slider { grid-column: 1 / 4; display: grid; grid-template-columns: 58px 1fr 58px 34px; gap: 6px; align-items: center; padding: 0 10px 10px 34px; font-size: .78rem; color: var(--wm-mute); }
.wm-slider input[type=range] { width: 100%; accent-color: var(--wm-green-2); }
.wm-slider input[type=number] { width: 100%; border: 1px solid var(--wm-line); border-radius: 6px; padding: 3px 4px; font-size: .78rem; text-align: center; }
.wm-slider .play { border: 1px solid var(--wm-line); background: #fff; border-radius: 6px; cursor: pointer; height: 26px; }

.wm-hint { margin: 0; padding: 7px 12px; font-size: .78rem; color: var(--wm-mute); border-top: 1px solid var(--wm-line); background: #fff; }

/* ---- keypad strip under the list -------------------------------------- */
.wm-keys { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px; border-top: 1px solid var(--wm-line); background: #fff; }
.wm-keys button { min-width: 38px; min-height: 34px; border: 1px solid var(--wm-line); background: var(--wm-soft); border-radius: 7px; font: 0.88rem var(--wm-math); color: var(--wm-ink); cursor: pointer; }
.wm-keys button:hover { background: var(--wm-green-bg); border-color: var(--wm-green-line); }

/* ---- canvas overlay controls ------------------------------------------ */
.wm-zoom { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 3; }
.wm-zoom .wm-btn { width: 38px; height: 38px; padding: 0; justify-content: center; box-shadow: 0 1px 3px rgba(15,23,42,.1); }
.wm-stage-tl { position: absolute; left: 12px; top: 12px; z-index: 3; }
.wm-stage-tl .wm-btn { box-shadow: 0 1px 3px rgba(15,23,42,.1); }
.wm-pop { max-height: calc(100% - 70px); overflow-y: auto; }
.wm-views { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 6px; z-index: 3; flex-wrap: wrap; }
.wm-views .wm-btn { padding: 6px 9px; min-height: 30px; font-size: .76rem; box-shadow: 0 1px 3px rgba(15,23,42,.08); }
.wm-g2-canvas, .wm-g3-canvas { display: block; cursor: grab; outline: none; }
.wm-g2-canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--wm-green-2); }
.wm-g2-canvas:active, .wm-g3-canvas:active { cursor: grabbing; }
.wm-g2-tip { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 4; background: rgba(15,23,42,.92); color: #fff;
  font: 600 .8rem/1 'Segoe UI', system-ui, sans-serif; padding: 7px 9px; border-radius: 7px; white-space: nowrap; }
.wm-toast { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); background: var(--wm-ink); color: #fff; padding: 8px 14px; border-radius: 8px; font-size: .85rem; z-index: 5; max-width: 90%; text-align: center; }

/* ---- settings popover --------------------------------------------------- */
.wm-pop { position: absolute; right: 60px; top: 12px; z-index: 6; width: 270px; background: #fff; border: 1px solid var(--wm-line); border-radius: 12px; box-shadow: 0 10px 30px rgba(15,23,42,.14); padding: 14px; font-size: .86rem; }
.wm-pop h3 { margin: 0 0 10px; font-size: .82rem; font-weight: 700; color: var(--wm-green); }
.wm-pop label { display: flex; align-items: center; gap: 8px; margin: 7px 0; color: var(--wm-text); }
.wm-pop .rng { display: grid; grid-template-columns: 22px 1fr 1fr; gap: 6px; align-items: center; margin: 6px 0; }
.wm-field { width: 100%; border: 1px solid var(--wm-line); border-radius: 7px; padding: 7px 8px; font: .92rem 'Segoe UI', system-ui, sans-serif; color: var(--wm-ink); background: #fff; min-width: 0; }
.wm-field[aria-invalid="true"] { border-color: var(--wm-err); background: var(--wm-err-bg); }

/* ---- example chips ------------------------------------------------------ */
.wm-examples { max-width: 1320px; margin: 4px auto 0; padding: 0 24px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .82rem; color: var(--wm-mute); }
.wm-chip { border: 1px solid var(--wm-line); background: #fff; border-radius: 999px; padding: 6px 12px; font: .82rem 'Segoe UI', system-ui, sans-serif; color: var(--wm-text); cursor: pointer; }
.wm-chip:hover { border-color: var(--wm-green-line); background: var(--wm-green-bg); color: var(--wm-green); }
@media (max-width: 860px) {
  /* one swipeable line of examples, so the tool itself starts higher up */
  .wm-examples { flex-wrap: nowrap; overflow-x: auto; padding: 2px 14px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .wm-examples::-webkit-scrollbar { display: none; }
  .wm-examples > * { flex: none; }
}

/* ---- solver tools (derivative, integral, matrix ...) ------------------- */
.wm-solver { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.wm-card { background: #fff; border: 1px solid var(--wm-line); border-radius: 14px; padding: 18px 20px; box-shadow: 0 1px 3px rgba(15,23,42,.05); }
.wm-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.wm-row > label { display: flex; flex-direction: column; gap: 5px; font-size: .86rem; font-weight: 600; color: var(--wm-text); }
.wm-row > label.grow { flex: 1 1 260px; }
.wm-row .wm-field { font-size: 1.05rem; padding: 10px 12px; font-family: var(--wm-math); }
.wm-row select.wm-field { font-family: 'Segoe UI', system-ui, sans-serif; font-size: .95rem; }
.wm-out { margin-top: 16px; }
.wm-result { font: 1.3rem/1.5 var(--wm-math); color: var(--wm-ink); background: var(--wm-green-bg); border: 1px solid var(--wm-green-line); border-radius: 10px; padding: 12px 16px; overflow-x: auto; }
.wm-result small { display: block; font: 600 .78rem 'Segoe UI', system-ui, sans-serif; color: var(--wm-mute); margin-bottom: 4px; }
.wm-error { color: var(--wm-err); background: var(--wm-err-bg); border: 1px solid #fecaca; border-radius: 10px; padding: 10px 14px; font-size: .92rem; }
.wm-note { margin: 8px 0 0; font-size: .9rem; color: var(--wm-mute); }
.wm-steps { counter-reset: st; list-style: none; padding: 0; margin: 14px 0 0; }
.wm-steps li { counter-increment: st; position: relative; padding: 10px 12px 10px 44px; border-left: 2px solid var(--wm-green-line); margin: 0; }
.wm-steps li::before { content: counter(st); position: absolute; left: -13px; top: 10px; width: 24px; height: 24px; border-radius: 50%; background: var(--wm-green); color: #fff; font: 700 .75rem/24px 'Segoe UI', sans-serif; text-align: center; }
.wm-steps .rule { display: block; font-size: .84rem; font-weight: 700; color: var(--wm-green); }
.wm-steps .m { font: 1.02rem/1.6 var(--wm-math); color: var(--wm-ink); overflow-x: auto; display: block; }
.wm-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.wm-mini-plot { position: relative; height: 360px; border: 1px solid var(--wm-line); border-radius: 12px; overflow: hidden; background: #fff; }
details > summary { cursor: pointer; font-weight: 600; color: var(--wm-green); }
@media (max-width: 860px) { .wm-split { grid-template-columns: 1fr; } .wm-solver { padding: 0 12px; } .wm-card { padding: 14px; } }

/* segmented tabs inside a tool (statistics) */
.wm-tabs { display: inline-flex; border: 1px solid var(--wm-line); border-radius: 10px; padding: 3px; gap: 3px; background: var(--wm-soft); margin-bottom: 14px; flex-wrap: wrap; }
.wm-tabs button { appearance: none; border: 0; background: transparent; color: var(--wm-text); font: 600 .86rem/1 'Segoe UI', system-ui, sans-serif; padding: 9px 14px; border-radius: 7px; cursor: pointer; min-height: 36px; }
.wm-tabs button[aria-selected="true"] { background: #fff; color: var(--wm-green); box-shadow: 0 1px 3px rgba(15,23,42,.12); }
.wm-tabs button:focus-visible { outline: 2px solid var(--wm-green-2); outline-offset: 1px; }
@media (max-width: 520px) {
  .wm-tabs { display: flex; flex-wrap: nowrap; width: 100%; }
  .wm-tabs button { flex: 1 1 0; padding: 9px 4px; font-size: .8rem; }
}

/* statistics summary */
.wm-stat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin-top: 14px; }
.wm-stat-cards div { background: var(--wm-soft); border: 1px solid var(--wm-line); border-radius: 10px; padding: 9px 12px; }
.wm-stat-cards span { display: block; font-size: .76rem; color: var(--wm-mute); }
.wm-stat-cards b { display: block; font: 700 1.12rem/1.3 var(--wm-math); color: var(--wm-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* matrix tool */
.wm-mx { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 18px 28px; }
.wm-mx section { min-width: 0; }
.wm-mx-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: .9rem; color: var(--wm-text); }
.wm-mx-head b { font: 700 1.25rem/1 var(--wm-math); color: var(--wm-ink); margin-right: 4px; }
.wm-mx-head select { width: auto; padding: 5px 6px; font-size: .9rem; }
.wm-mx-grid { overflow-x: auto; padding-bottom: 2px; }
.wm-mx-ops { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; }
.wm-mx-ops .lbl { width: 100%; font-size: .8rem; color: var(--wm-mute); margin-bottom: 2px; }
.wm-mx-ops input { width: 56px; padding: 6px 6px; }
.wm-matrix { display: inline-grid; gap: 4px; padding: 6px 10px; border-left: 2px solid var(--wm-ink); border-right: 2px solid var(--wm-ink); border-radius: 6px; }
.wm-matrix input { width: 64px; text-align: center; border: 1px solid var(--wm-line); border-radius: 6px; padding: 7px 4px; font: 1rem var(--wm-math); }
.wm-matrix input[aria-invalid="true"] { border-color: var(--wm-err); background: var(--wm-err-bg); }
@media (max-width: 480px) { .wm-matrix input { width: 52px; } }
.wm-mtable { border-collapse: collapse; font: 1rem var(--wm-math); width: auto; border: 0; }
.wm-mtable td { padding: 4px 10px; text-align: right; border: 0; }
.wm-mwrap { display: inline-block; border-left: 2px solid var(--wm-ink); border-right: 2px solid var(--wm-ink); border-radius: 6px; padding: 2px 4px; vertical-align: middle; }

/* ---- tools hub ------------------------------------------------------------ */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin: 14px 0 34px; }
.tool-card { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--wm-line); border-radius: 14px; padding: 18px; color: inherit; transition: border-color var(--wm-mid) var(--wm-ease), box-shadow var(--wm-mid) var(--wm-ease), transform var(--wm-mid) var(--wm-ease); }
.tool-card:hover { border-color: var(--wm-green-line); box-shadow: 0 8px 22px rgba(15,23,42,.08); transform: translateY(-2px); text-decoration: none; }
.tool-card svg { width: 40px; height: 40px; }
.tool-card .t { font-weight: 750; color: var(--wm-ink); font-size: 1.05rem; }
.tool-card .d { color: var(--wm-mute); font-size: .9rem; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .tool-card, .wm-btn, .wm-swatch i, .wm-expr { transition: none; }
  .tool-card:hover { transform: none; }
}