/* TickTockMaths Graph Engine v1.6.0 — surface-aware graph actions */
  /* ── Graph Slide ── */
  .slide-card.graph-slide { }
  .graph-title-row {
    display: flex;
    align-items: center;
    padding: 8px 16px 6px;
    gap: 8px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
  }
  .graph-slide-title {
    font-family: 'Noto Sans', sans-serif;
    font-size: 1.05em;
    font-weight: 400;
    text-align: center;
    color: #2e2d2a;
    flex: 1;
  }
  /* canvas + sidebar row fills all remaining space */
  .graph-main {
    flex: 1;
    display: flex;
    flex-direction: row;
    min-height: 0;
    overflow: hidden;
  }
  /* [static] tag — a clean, fixed graph with no editing chrome. The
     underlying elements/listeners still exist (safer than conditionally
     omitting them from the template, which would need every downstream
     querySelector/event-listener call in renderGraph to handle a null
     reference) — this just hides/disables them.
     The function list itself stays visible (a predefined [fn] is often the
     whole point — e.g. putting up a fixed graph to draw over), just with no
     way to add or remove a function. Pan/zoom/drag on the canvas itself is
     disabled in JS (isStatic guards on the pan/wheel/pinch handlers), not
     CSS, since none of that is gated by a visible control element anyway. */
  .graph-slide.graph-static .graph-controls,
  .graph-slide.graph-static .graph-add-row,
  .graph-slide.graph-static .graph-fn-remove {
    display: none;
  }
  .graph-canvas-wrap {
    flex: 1;
    position: relative;
    min-width: 0;
    background: var(--slide-bg, #fff);
  }
  .graph-canvas-wrap canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
  }
  /* Base cursor is grab (suggests draggable) — static mode has nothing
     draggable, so don't visually imply otherwise. */
  .graph-slide.graph-static .graph-canvas-wrap canvas {
    cursor: default;
  }
  /* Sidebar: only functions list — fills height, scrolls internally */
  .graph-sidebar {
    width: clamp(245px, 27vw, 330px);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--border);
    background: var(--slide-bg, var(--bg));
    padding: 12px 14px;
    gap: 10px;
    overflow: hidden;
    font-family: 'Noto Sans', sans-serif;
    box-sizing: border-box;
  }
  .graph-sidebar-label {
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted);
    flex-shrink: 0;
  }
  .graph-fn-list {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
  }
  .graph-fn-row {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
    min-height: 44px;
    padding: 5px 4px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  }
  .graph-fn-swatch {
    width: 5px;
    height: 30px;
    border-radius: 999px;
    flex-shrink: 0;
  }
  .graph-fn-label {
    font-family: 'Noto Sans', sans-serif;
    font-size: 1.12rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--text);
    flex: 1;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .graph-fn-label mjx-container {
    margin: 0 !important;
    font-size: 1.08em !important;
  }
  .graph-fn-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted);
    font-size: 0.8rem;
    padding: 0 2px;
    line-height: 1;
    flex-shrink: 0;
  }
  .graph-fn-remove:hover { color: #c0392b; }
  .graph-add-row {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
  }
  .graph-add-input {
    flex: 1;
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 8px 9px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 0.9rem;
    background: var(--surface);
    color: var(--text);
    outline: none;
    min-width: 0;
  }
  .graph-add-input:focus { border-color: var(--accent); }
  .graph-add-btn {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 7px 12px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
  }
  .graph-add-btn:hover { background: #1e4a8c; }
  .graph-error {
    font-size: 0.7rem;
    color: #c0392b;
    font-family: 'DM Mono', monospace;
    flex-shrink: 0;
  }
  /* Controls strip below canvas+sidebar */
  .graph-controls {
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    border-top: 1px solid var(--border);
    background: var(--slide-bg, var(--bg));
    flex-wrap: nowrap;
    overflow: hidden;
  }
  .graph-ctrl-group {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
  }
  .graph-ctrl-label {
    font-family: 'DM Mono', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent);
  }
  .graph-ctrl-sep {
    font-size: 0.68rem;
    color: var(--muted);
  }
  .graph-range-input {
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 3px 5px;
    font-family: 'DM Mono', monospace;
    font-size: 0.75rem;
    background: var(--surface);
    color: var(--text);
    outline: none;
    text-align: center;
    width: 52px;
    box-sizing: border-box;
  }
  .graph-range-input:focus { border-color: var(--accent); }
  .graph-mode-btn {
    border: 1.5px solid var(--border);
    border-radius: 5px;
    padding: 3px 8px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--surface);
    color: var(--muted);
    transition: all 0.12s;
  }
  .graph-mode-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }
  .graph-redraw-btn {
    background: var(--surface);
    border: 1.5px solid #111;
    border-radius: 5px;
    padding: 3px 14px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--text);
    transition: background 0.12s;
    margin-left: auto;
    flex-shrink: 0;
  }
  .graph-redraw-btn:hover { background: var(--accent-light); }
  .graph-reset-btn {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 5px;
    padding: 3px 9px;
    font-size: 0.85rem;
    cursor: pointer;
    color: var(--muted);
    transition: background 0.12s, color 0.12s;
    flex-shrink: 0;
  }
  .graph-reset-btn:hover { background: var(--accent-light); color: var(--accent); }
  /* ── Diagram canvas (shared across EPP, MiniWBS, MC, Questions) ── */
  .diagram-canvas-wrap {


/* Preserve authoring semantics without changing maths layout. */
.ttm-authored-math-inline { display: inline; }
.ttm-authored-math-display { display: block; }



/* Uses the existing TTM .counter-popover shell. */
.graph-context-action.counter-popover { cursor:pointer; }
.graph-counter-action {
  width:82px; min-height:82px; padding:9px 8px 7px; box-sizing:border-box;
  border-radius:12px; background:#eef3fb; color:#1d2b44;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; user-select:none;
}
.graph-counter-action-icon {
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
}
.graph-counter-action-icon svg {
  display:block !important; width:30px !important; height:30px !important;
  min-width:30px !important; max-width:30px !important;
  min-height:30px !important; max-height:30px !important;
  fill:none; stroke:#222; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
}
.graph-counter-action-label {
  font-family:'Noto Sans',sans-serif; font-size:.78rem; line-height:1;
  font-weight:800; color:#1d2b44;
}
.graph-context-action.counter-popover:hover .graph-counter-action { background:#e6edf8; }

/* Context Graph action uses counters.js .counter-selection-actions and the
   exact same duotone <img> mechanism as Duplicate / Flip / Group / Delete. */
.graph-context-action button img {
  width:29px; height:29px; display:block; pointer-events:none; opacity:.92;
}
@media (pointer:coarse) {
  .graph-context-action button img { width:31px; height:31px; }
}

/* Questions: same interaction-tray language as Eye / Regen / Flag. */


.epp-slide .ttm-authored-math.ttm-epp-graphable { cursor:pointer; }

.epp-slide mjx-container.ttm-epp-graphable { cursor:pointer; }

/* Graph is a cloned Flag button: only the duotone icon itself needs sizing. */
.question-highlight-btn.question-graph-btn img {
  width:20px; height:20px; display:block; pointer-events:none; opacity:.72;
}

.ttm-epp-native-graph { cursor:pointer; }

/* v1.7.3 — make function remove controls unmistakable on the classroom graph UI. */
.graph-fn-remove {
  color: #c0392b !important;
  font-size: 1.55rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.graph-fn-remove:hover {
  color: #a93226 !important;
}