Blame for mathly2/static/board.css

/* The smart board's styles, from mathly1's static/math.css (the block from "the sketch board beside a skill's exercise" to the
   teacher-report block), plus the sheet, layer and scrim rules the board's layout relies on. The rules are unchanged: mathly1's variable
   names are defined below from the sky tokens in app.css, so the board follows light and dark with no edits. All selectors are .mx-*,
   which nothing else in mathly2 uses. */
:root {
  --ink: var(--text); --surface-2: var(--sky-night);
  --mx-accent: var(--accent); --mx-accent-soft: color-mix(in srgb, var(--accent) 18%, var(--surface)); --mx-on-accent: var(--accent-text);
  --f-body: system-ui, "Segoe UI", Arial, "Noto Sans Hebrew", sans-serif;
  --sumac: var(--danger); --sumac-bg: color-mix(in srgb, var(--danger) 14%, var(--surface));
  --gold: var(--sky-gold); --starlight: var(--sky-gold); --amber: var(--sky-gold);
  --amber-bg: color-mix(in srgb, var(--sky-gold) 16%, var(--surface));
  --ok-bg: color-mix(in srgb, var(--ok, #15803d) 14%, var(--surface)); --aurora: var(--sky-aurora);
  --mx-scrim: rgb(5 8 20 / .55);
}

/* the sheet over the path that the board sits beside (or covers, on a phone) */
.mx-layer[hidden]{display:none}
.mx-scrim{position:fixed;inset:0;z-index:61;background:var(--mx-scrim)}
.mx-sheet{position:fixed;inset:auto 0 0 0;z-index:62;max-height:88vh;overflow:auto;background:var(--surface);border-radius:20px 20px 0 0;
  box-shadow:0 -6px 30px rgb(0 0 0/.2);display:flex;flex-direction:column;gap:14px;
  padding-block:16px calc(24px + env(safe-area-inset-bottom, 0px));
  padding-left:max(18px, env(safe-area-inset-left, 0px));padding-right:max(18px, env(safe-area-inset-right, 0px))}
@media (min-width:720px){.mx-sheet{inset:auto calc(50% - 330px) 0 calc(50% - 330px)}}
.mx-sheet>p{margin:0}

/* the sketch board beside a skill's exercise (static/math-board.js): a desktop screen with a mouse or a pen only */
.mx-shacts{display:flex;align-items:center;gap:6px}
.mx-board{display:none}   /* the buttons that open it show everywhere: beside the exercise on a desktop, full screen on a phone */
.mx-board-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:none;color:var(--muted);font:700 14px/1 var(--f-body);padding:7px 12px;border-radius:999px;cursor:pointer}
.mx-board-btn .mx-ic{width:16px;height:16px}
/* the board's icons: one line-drawn set in the button's own colour */
.mx-ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
[dir="rtl"] .mx-ic-flip{transform:scaleX(-1)}   /* back and undo point to the start of a right-to-left line */
.mx-board-btn[aria-pressed="true"]{border-color:var(--mx-accent);background:var(--mx-accent-soft);color:var(--ink)}
@media (min-width:1000px) and (any-pointer:fine){
  .mx-sheet.with-board{inset:16px 16px 16px auto;width:min(600px,42vw);max-height:none;border-radius:20px}
  .mx-board{display:flex;flex-direction:column;position:fixed;z-index:62;top:16px;bottom:16px;left:16px;right:clamp(16px,var(--door,100vw),calc(min(600px,42vw) + 32px));transition:right .28s ease;
    background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 6px 30px rgb(0 0 0/.25)}
}
.mx-board-bar{display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.mx-board-bar button{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid transparent;background:none;color:var(--muted);
  font:500 14px/1 var(--f-body);padding:0 7px;border-radius:10px;cursor:pointer;height:36px;min-width:36px}
.mx-board-bar button:hover{color:var(--ink);background:var(--surface-2)}
.mx-board-bar button[hidden]{display:none}
.mx-board-bar button[aria-pressed="true"]{color:var(--ink);border-color:var(--mx-accent);background:var(--mx-accent-soft)}
@media (max-width:1600px){.mx-board-bar button span{display:none}}   /* a narrower board: icons only, names stay as tooltips */
.mx-board-group{display:inline-flex;align-items:center;gap:3px}
/* the inks and the eraser's sizes sit on a strip of the paper's colour, so each ink shows as it will be drawn
   (the black one too); the chosen one has a ring, not the tools' outline. The sizes take the inks' place with
   the eraser, so the bar keeps its shape. */
.mx-board-inks,.mx-board-sizes{background:#F8F7F2;border-radius:12px;padding:2px;gap:2px}
.mx-board-bar .mx-board-inks button,.mx-board-bar .mx-board-sizes button{width:34px;min-width:0;height:32px;padding:0;border:0;border-radius:9px;background:none}
.mx-board-bar .mx-board-inks button:hover,.mx-board-bar .mx-board-sizes button:hover{background:rgb(27 33 64/.08)}
.mx-board-inks button::before,.mx-board-sizes button::before{content:"";border-radius:50%}
.mx-board-inks button::before{width:18px;height:18px;background:var(--dot)}
.mx-board-sizes button::before{width:var(--d);height:var(--d);background:#8A93B8}
.mx-board-bar .mx-board-inks button[aria-pressed="true"],.mx-board-bar .mx-board-sizes button[aria-pressed="true"]{background:none}
.mx-board-inks button[aria-pressed="true"]::before{box-shadow:0 0 0 2px #F8F7F2,0 0 0 4px #1B2140}
.mx-board-sizes button[aria-pressed="true"]::before{background:#1B2140;box-shadow:0 0 0 2px #F8F7F2,0 0 0 4px #1B2140}
.mx-board:not([data-tool="eraser"]) .mx-board-sizes,.mx-board[data-tool="eraser"] .mx-board-inks{display:none}
.mx-board-acts{margin-inline-start:auto}   /* the page's actions at the far end, apart from the tools */
.mx-board-bar .mx-board-close{position:relative;margin-inline-start:9px}   /* close, kept apart from clear by a line */
.mx-board-close::before{content:"";position:absolute;inset-inline-start:-8px;top:8px;bottom:8px;width:1px;background:var(--line)}
.mx-board-row{display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid var(--line)}
.mx-board-row[hidden]{display:none}
.mx-board-pages{display:flex;align-items:center;gap:4px;flex:1;color:var(--muted);font-size:13px}
.mx-board-pages span{margin-inline-end:4px}
.mx-board-pages button{min-width:30px;height:28px;border:1px solid var(--line);background:none;color:var(--muted);border-radius:8px;font:700 13px/1 var(--f-body);cursor:pointer}
.mx-board-pages button.has{color:var(--ink)}
.mx-board-pages button[aria-selected="true"]{border-color:var(--mx-accent);background:var(--mx-accent-soft);color:var(--ink)}
.mx-board-stage{position:relative;flex:1;min-height:0}
/* a pen held still on an iPad is a long press: no text selection, no Copy bubble and no magnifier on the board.
   The angle's words and the typed math are still fields to type in. */
.mx-board{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.mx-board input,.mx-board math-field{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
.mx-board button{touch-action:manipulation}   /* two quick taps on a button: two taps, not a zoom */
.mx-board canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair;
  background-color:#F8F7F2;background-image:linear-gradient(rgb(27 33 64/.07) 1px,transparent 1px),linear-gradient(90deg,rgb(27 33 64/.07) 1px,transparent 1px);
  background-size:28px 28px}
.mx-board-del,.mx-board-top{display:inline-flex;align-items:center;gap:5px}
.mx-board-del .mx-ic,.mx-board-top .mx-ic{width:16px;height:16px}
.mx-board-del{position:absolute;z-index:1;border:1px solid #E7B3BB;background:#FFF1F3;color:#B4233A;font:700 13px/1 var(--f-body);
  padding:7px 11px;border-radius:999px;cursor:pointer;box-shadow:0 2px 8px rgb(27 33 64/.15)}
.mx-board-del[hidden]{display:none}
.mx-calc{position:absolute;z-index:2;inset-block-end:12px;inset-inline-start:12px;width:min(340px,calc(100% - 24px));max-height:calc(100% - 24px);overflow:auto;
  padding:12px;border:1px solid #2A2F45;border-radius:18px;background:#3A3F55;color:#fff;box-shadow:0 8px 24px rgb(27 33 64/.35);display:flex;flex-direction:column;gap:10px}
.mx-calc[hidden]{display:none}
/* the closet door's handle on the board's right edge (a desktop screen): tap or drag it to slide the board over the exercise */
.mx-board-door{display:none}
@media (min-width:1000px) and (any-pointer:fine){
  .mx-board-door{display:flex;align-items:center;justify-content:center;position:absolute;z-index:3;right:0;top:50%;transform:translateY(-50%);
    width:22px;height:110px;padding:0;border:1px solid var(--line);border-right:0;border-radius:12px 0 0 12px;background:var(--surface-2);cursor:ew-resize;touch-action:none}
  .mx-board-door::before{content:"";width:5px;height:56px;border-radius:3px;background:var(--muted);opacity:.6}
  .mx-board-door:hover::before{opacity:1;background:var(--mx-accent)}
  .mx-board.wide{z-index:63}   /* over the exercise it slid onto */
  .mx-board.sliding{transition:none}
  .mx-board.full .mx-board-door{display:none}
}
@media (prefers-reduced-motion:reduce){.mx-board{transition:none}}
/* the bar that drags the calculator: wide enough for a finger, with a grip in the middle */
.mx-calc-grip{height:22px;margin:-6px -4px -4px;border-radius:10px;cursor:grab;touch-action:none;display:flex;align-items:center;justify-content:center}
.mx-calc-grip::before{content:"";width:48px;height:5px;border-radius:3px;background:rgb(255 255 255/.45)}
.mx-calc-grip:hover::before{background:rgb(255 255 255/.75)}
.mx-calc.moving{box-shadow:0 14px 34px rgb(27 33 64/.45)}
.mx-calc.moving .mx-calc-grip{cursor:grabbing}
.mx-calc-screen{position:relative;background:#C9D3B4;color:#1E2418;border-radius:8px;padding:16px 10px 6px;text-align:right;display:flex;flex-direction:column;box-shadow:inset 0 2px 5px rgb(0 0 0/.3)}
.mx-calc-flags{position:absolute;top:3px;left:8px;font:700 10px/1 var(--f-body);letter-spacing:.08em}
.mx-calc-expr{font:500 17px/1.3 ui-monospace,Menlo,Consolas,monospace;overflow-x:auto;white-space:nowrap;scrollbar-width:none;min-height:22px}
.mx-calc-screen output{font:700 24px/1.3 ui-monospace,Menlo,Consolas,monospace;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.mx-calc-screen output.live{opacity:.55}
.mx-calc-keys{display:grid;grid-template-columns:repeat(5,1fr);gap:14px 6px}
.mx-calc-keys button{position:relative;height:38px;padding:0;border:0;border-radius:8px;font:700 15px/1 var(--f-body);cursor:pointer;color:#fff;background:#5A5F78;box-shadow:0 2px 0 #1E2233}
.mx-calc-keys button i{position:absolute;top:-11px;left:0;right:0;font:600 10px/1 var(--f-body);font-style:normal;color:#F2C94C;pointer-events:none}
.mx-calc-keys button.num{background:#F4F5FA;color:#1B2140}
.mx-calc-keys button.fn{background:#2E3247;font-size:13px}
.mx-calc-keys button.op{background:#5A5F78}
.mx-calc-keys button.del{background:#D3455B}
.mx-calc-keys button.eq{grid-column:span 2;background:#2563D9}
.mx-calc-keys button.shift{background:#F2C94C;color:#1B2140}
.mx-calc-keys button.shift[aria-pressed="true"]{box-shadow:0 0 0 3px #fff}
.mx-calc-keys button.shifted:not(.shift){}
.mx-calc-keys button:active{transform:translateY(1px);filter:brightness(.9)}
.mx-calc-keys{padding-top:10px}

.mx-board-send .mx-ic{width:18px;height:18px}
.mx-board-send{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--mx-accent);background:var(--mx-accent);color:var(--mx-on-accent);
  font:700 14px/1 var(--f-body);padding:8px 14px;border-radius:999px;cursor:pointer}
.mx-board-send[hidden]{display:none}
.mx-board-send:disabled{opacity:.7;cursor:progress}
.mx-board-top{position:absolute;z-index:1;top:8px;left:50%;transform:translateX(-50%);border:1px solid #C5CBDF;background:#fff;color:#1B2140;
  font:700 13px/1 var(--f-body);padding:7px 12px;border-radius:999px;cursor:pointer;box-shadow:0 2px 8px rgb(27 33 64/.15)}
.mx-board-top[hidden]{display:none}
.mx-uq-q{scroll-margin-top:90px}   /* a question scrolled to from the board's tabs shows below the quiz's sticky head */

/* the board full screen (a phone or a tablet, and the phone's answer to a photo request) */
.mx-board-head{display:none}
.mx-board.full{display:flex;flex-direction:column;position:fixed;inset:0;z-index:1100;border:0;border-radius:0;box-shadow:none;background:var(--surface);
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
.mx-board.full .mx-board-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line);color:var(--ink)}
.mx-board-back{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--mx-accent);background:var(--mx-accent-soft);color:var(--ink);font:700 14px/1 var(--f-body);padding:9px 14px;border-radius:999px;cursor:pointer}
.mx-board.full .mx-board-bar{flex-wrap:wrap;row-gap:4px}   /* every tool in sight: two rows on a phone rather than hidden off the edge */
.mx-board.full .mx-board-bar [data-do="hide"]{display:none}   /* the head's "back" does it */   /* the head's "back" does it */
.mx-board.full .mx-board-bar button{height:40px;min-width:40px}
.mx-board.full .mx-board-bar .mx-board-inks button,.mx-board.full .mx-board-bar .mx-board-sizes button{height:36px;width:40px}

/* typing math on the board: a bar over the board's top; MathLive's keyboard sits above everything, the board too */
body{--keyboard-zindex:3000}
.mx-board-mathedit{position:absolute;z-index:2;top:8px;left:8px;right:8px;display:flex;align-items:center;gap:6px;padding:6px;
  background:#fff;border:1.5px solid var(--mx-accent);border-radius:12px;box-shadow:0 4px 16px rgb(27 33 64/.18)}
.mx-board-mathedit math-field{flex:1;min-width:0;font-size:24px;border:0;background:none;color:#1B2140;--caret-color:#2563D9;--selection-background-color:#DCE6FF}
.mx-board-mathedit math-field::part(virtual-keyboard-toggle),.mx-board-mathedit math-field::part(menu-toggle){display:none}
.mx-board-mathedit button{flex:none;width:40px;height:40px;border-radius:10px;border:1px solid #C5CBDF;background:#F4F6FC;color:#1B2140;font:700 18px/1 var(--f-body);cursor:pointer}
.mx-board-mathedit button[data-math="ok"]{background:var(--mx-accent);border-color:var(--mx-accent);color:var(--mx-on-accent)}
/* an angle's words, typed in a box where they will sit */
.mx-board-angleedit{position:absolute;z-index:2;display:flex;flex-direction:column;gap:4px;padding:4px;background:#fff;border:1px solid #C5CBDF;border-radius:12px;
  box-shadow:0 2px 10px rgb(27 33 64/.2)}
.mx-board-anglein{width:80px;height:34px;box-sizing:border-box;padding:0 6px;border:1.5px solid #2563D9;border-radius:9px;
  background:#fff;color:#1B2140;font:500 17px/1 "STIX Two Text","Cambria Math","Times New Roman",serif;text-align:center;outline:none}
.mx-board-angleedit button{width:34px;height:34px;border:1px solid #C5CBDF;border-radius:9px;background:#F4F6FC;color:#1B2140;
  font:500 18px/1 "STIX Two Text","Cambria Math","Times New Roman",serif;cursor:pointer}
.mx-board-angleedit button:hover{background:#DCE6FF;border-color:#2563D9}
.mx-board-arcs{display:flex;gap:4px;padding-inline-start:4px;border-inline-start:1px solid #C5CBDF}
.mx-board-arcs button{display:inline-flex;align-items:center;justify-content:center;padding:0}
.mx-board-arcs button[aria-pressed="true"]{background:#DCE6FF;border-color:#2563D9}
.mx-board-anglerow{display:flex;align-items:center;gap:4px}
.mx-board-anglerow .mx-board-anglein{flex:1}
.mx-board-anglerow > .mx-board-arcs{border:0;padding:0}   /* first in its row: no line before it */
.mx-board-colors{display:flex;gap:4px;padding-inline-start:4px;border-inline-start:1px solid #C5CBDF}
.mx-board-colors button{display:inline-flex;align-items:center;justify-content:center;padding:0;background:none}
.mx-board-colors button::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--dot)}
.mx-board-colors button[aria-pressed="true"]{background:none;border-color:transparent}
.mx-board-colors button[aria-pressed="true"]::before{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--dot)}
.mx-board-anglein::placeholder{color:#8A93B8}
.mx-board-mathwait{flex:1;color:#5B6694;font:500 14px/1.3 var(--f-body);padding:8px}