/*
bitch, im STYLISH
glock tucked big t shirt
billie eilish
*/

:root {
  --z: 1;
  --cell: calc(2.4rem * var(--z));
  /* One pink (hue ~344) from pale to dark. Light steps are backgrounds, middle steps are
     borders, dark steps are text. Every text pair is at least 4.5:1 and every border 3:1. */
  --pink-50: #fff8fc;
  --pink-100: #ffe9f5;
  --pink-200: #ffd7ed;
  --pink-300: #f7b8db;
  --pink-400: #e588bc;
  --pink-500: #c34189;
  --pink-600: #ac1b6e;
  --pink-700: #881356;
  --pink-800: #5f0f3c;
  --pink-900: #390a23;
  /* Orange for caution, so it never gets mixed up with the pinks. */
  --caution: #9a3c00;
  --caution-bg: #ffead7;
  --caution-border: #c85d00;
}
html, body {
  margin: 0;
  height: 100%;
  font-family: "Lexend", system-ui, sans-serif;
}
[hidden] {
  display: none !important;
}

/* Page: toolbar on top, sheet in the middle (scrolls), finished math pinned at the bottom. */

body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.wrap {
  padding-inline: 16px;
}

/* Toolbar */

.topbar {
  flex: none;
  padding-block: 4px;
  color: var(--pink-900);
  background: var(--pink-200);
  border-bottom: 1px solid var(--pink-500);
  accent-color: var(--pink-600);
}
.topbar a {
  color: var(--pink-700);
}
.title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 1em;
}

/* File, Edit and View menus, like a Mac app's menu bar. Each opens over the ribbon. */
.menubar {
  display: flex;
  gap: 2px;
}
.menu-wrap {
  position: relative;
}
.topbar .menu-title {
  font-weight: 500;
  background: transparent;
  border-color: transparent;
}
.topbar .menu-title:hover {
  background: var(--pink-100);
  border-color: var(--pink-500);
}
.topbar .menu-title[aria-expanded="true"] {
  background: var(--pink-300);
  border-color: var(--pink-600);
}
.menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  min-width: 17rem;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--pink-500);
  border-radius: 0.5rem;
  box-shadow: 0 6px 20px rgb(57 10 35 / 0.18);
}
.menu hr {
  margin: 4px 8px;
  border: none;
  border-top: 1px solid var(--pink-300);
}
.topbar .menu .menu-item {
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
  min-height: 2.25rem;
  text-align: left;
  background: transparent;
  border-color: transparent;
  border-radius: 0.375rem;
}
.topbar .menu .menu-item:hover {
  background: var(--pink-100);
  border-color: var(--pink-500);
}
/* Inside a menu the focus ring sits just inside the item, so it can't cover its neighbours. */
.topbar .menu .menu-item:focus-visible, .menu .toggle:has(input:focus-visible) {
  outline: 3px solid var(--pink-900);
  outline-offset: -3px;
  box-shadow: none;
}
.topbar .menu .menu-item.danger {
  justify-content: flex-start;
  gap: 0.375rem;
  color: var(--caution);
}
.menu-keys {
  font-size: 0.875rem;
  color: var(--pink-700);
}
.topbar .menu .menu-item.toggle {
  justify-content: flex-start;
  gap: 0.5rem;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0.25rem 0.75rem;
  cursor: pointer;
  border: 1px solid transparent;
}
.menu .zoom {
  padding: 0.25rem 0.75rem;
}
.topbar h1 {
  font-size: 2em;
  margin: 4px 0;
  color: var(--pink-600);
}
.ribbon {
  display: flex;
  flex-wrap: wrap;
  row-gap: 6px;
}
.ribbon > .group {
  display: flex;
  flex-direction: column;
  padding: 2px 8px;
  border-inline-end: 1px solid var(--pink-400);
}
.ribbon > .group:first-child {
  padding-inline-start: 0;
}
.ribbon > .group:last-child {
  border-inline-end: none;
}
/* Small controls stack three high, then start a new column, like a ribbon. */
.group-body {
  flex: 1;
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  align-content: start;
  justify-items: start;
  gap: 4px;
}
/* Symbols stack four high: the Sheet panel already makes the ribbon that tall, so it costs no height. */
.group-body.rows-4 {
  grid-template-rows: repeat(4, auto);
}
#tools, #symbols {
  display: contents;
}
/* a/b, Tidy a/b and Highlight share the Wrap panel's first column at one width. */
.topbar #tools > :is([data-kind="frac"], #tidyFrac, [data-kind="hl"]) {
  justify-self: stretch;
}
.group-label {
  margin-top: 6px;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--pink-700);
}

.topbar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 2.25rem;
  padding: 0.25rem 0.75rem;
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--pink-800);
  background: #fff;
  border: 1px solid var(--pink-500);
  border-radius: 0.5rem;
  white-space: nowrap;
  cursor: pointer;
}
@media (prefers-reduced-motion: no-preference) {
  .topbar button {
    transition: color 0.15s, background-color 0.15s, border-color 0.15s ease-in-out;
  }
}
.topbar button:hover {
  background: var(--pink-100);
  border-color: var(--pink-600);
}
.topbar button:active {
  background: var(--pink-300);
}
/* A dark ring with a white halo inside it, so it shows up on the pink bar and on the white button. */
.topbar button:focus-visible {
  outline: 3px solid var(--pink-900);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
}
.topbar button.danger {
  color: var(--caution);
  background: var(--caution-bg);
  border-color: var(--caution-border);
}
.topbar button.danger::before {
  content: "⚠" / "";
}
.topbar button.danger:hover {
  background: #fff;
}
.topbar button:disabled {
  opacity: 0.65;
  pointer-events: none;
}
.toggle, .zoom {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 2.25rem;
}
/* Symbols are square tiles, so they line up like a keypad. */
.topbar button.sym {
  display: inline-block; /* not flex, so a built-in subscript stays inline with its letter */
  width: 2.25rem;
  padding: 0;
  font-size: 1.0625rem;
  line-height: calc(2.25rem - 2px);
}

/* Sheet controls: row buttons stacked above and below, the two column buttons side by side
   at half width in the middle, so the panel is no wider than one row button. */
.pad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "ta   ta"
    "na   na"
    "l    r"
    "nb   nb"
    "tb   tb";
  gap: 4px 6px;
}
.topbar .pad button {
  padding-inline: 0.5rem;
}
.pad-ta {
  grid-area: ta;
}
.pad-na {
  grid-area: na;
}
.pad-l {
  grid-area: l;
}
.pad-r {
  grid-area: r;
}
.pad-nb {
  grid-area: nb;
}
.pad-tb {
  grid-area: tb;
}
/* The info strip: what the pointed-at button does, or what the symbol under the cursor means. */
.explain {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  align-content: center;
  gap: 4px 10px;
  /* Always two lines tall, so pointing at different buttons never moves the sheet. */
  min-height: calc(3rem + 14px);
  line-height: 1.5;
  box-sizing: border-box;
  margin-block: 6px 4px;
  padding: 6px 12px;
  background: var(--pink-50);
  border: 1px solid var(--pink-400);
  border-radius: 0.5rem;
}
.explain-where {
  font-size: 0.8125rem;
  color: var(--pink-700);
}
.explain-glyph {
  font-size: 1.25rem;
  line-height: 1;
}
.explain-glyph sub {
  font-size: 0.65em;
}
.explain-means {
  flex: 1 1 20rem;
}
.explain-keys {
  margin-left: auto;
  padding: 0 8px;
  font-size: 0.875rem;
  white-space: nowrap;
  color: var(--pink-800);
  background: var(--pink-100);
  border: 1px solid var(--pink-500);
  border-radius: 0.375rem;
}
/* "Around this cell": the wraps the cursor is inside, shown in the Wrap panel under its buttons.
   It fills the panel's width without widening it, so the ribbon never reflows. */
.chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  gap: 4px;
  width: 0;
  min-width: 100%;
  margin-top: 6px;
  font-size: 0.875rem;
}
.chips:empty {
  display: none;
}
.ribbon > .group:has(.chips) > .group-body {
  flex: none;
}
.ribbon > .group:has(.chips) > .group-label {
  margin-top: auto;
  padding-top: 6px;
}
.topbar button.chip {
  min-height: 1.75rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.875rem;
  white-space: normal;
  text-align: left;
}
.explain-status.is-error {
  font-weight: 500;
  color: var(--caution);
}
/* Hidden on screen, still read by screen readers. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Follow the reader's system settings: stronger text and edges when they ask for more contrast. */
@media (prefers-contrast: more) {
  .topbar {
    background: var(--pink-50);
    border-bottom-color: var(--pink-900);
  }
  .topbar button {
    color: var(--pink-900);
    border-color: var(--pink-800);
    border-width: 2px;
  }
  .group-label {
    color: var(--pink-900);
    font-weight: 500;
  }
  .ribbon > .group {
    border-inline-end-color: var(--pink-800);
  }
}
/* Windows High Contrast picks its own colors; borders above stay solid so buttons keep their edges. */
@media (forced-colors: active) {
  .topbar button:focus-visible {
    outline-color: Highlight;
  }
}

/* about.html and docs.html share this file but are ordinary scrolling pages. */

body.page {
  display: block;
  height: auto;
  overflow: visible;
  margin: 0 auto;
  padding: 8px 16px 32px;
  max-width: 46rem;
  line-height: 1.6;
  color: var(--pink-900);
}
body.page h1, body.page h2 {
  color: var(--pink-600);
  line-height: 1.25;
}
body.page a {
  color: var(--pink-700);
}
body.page dt {
  font-weight: 700;
}
body.page dd {
  margin: 0 0 0.5em 1.5em;
}
/* Keyboard shortcuts and the reference card. */
table.ref {
  width: 100%;
  border-collapse: collapse;
  margin-block: 0.5em 1.5em;
}
table.ref th, table.ref td {
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--pink-300);
}
table.ref thead th {
  background: var(--pink-100);
  border-bottom-color: var(--pink-500);
}
table.ref tbody th {
  font-weight: 400;
  white-space: nowrap;
}
.refcard td:last-child {
  white-space: nowrap;
}
.ref-glyph {
  font-size: 1.25rem;
}
.ref-glyph sub {
  font-size: 0.65em;
}
kbd {
  font: inherit;
  font-size: 0.875rem;
  padding: 0 6px;
  white-space: nowrap;
  color: var(--pink-800);
  background: var(--pink-100);
  border: 1px solid var(--pink-500);
  border-radius: 0.375rem;
}
#printCard {
  font: inherit;
  min-height: 2.25rem;
  padding: 0.25rem 0.75rem;
  color: var(--pink-800);
  background: #fff;
  border: 1px solid var(--pink-500);
  border-radius: 0.5rem;
  cursor: pointer;
}
#printCard:hover {
  background: var(--pink-100);
}
.sheet-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  outline: none;
  --cell: calc(2.4rem * var(--z));
}
/* One row's worth of blank space after the last line, so it isn't flush with the window edge. */
.sheet {
  display: block;
  padding-bottom: var(--cell);
}

/* Lines sit right on top of each other, like one sheet of graph paper. */

.line {
  display: flex;
  align-items: flex-start;
}
.line-head {
  font-size: calc(1rem * var(--z));
  flex: none;
  height: var(--cell);
  display: flex;
  align-items: center;
}
.ln {
  width: 2em;
  text-align: right;
}
/* Move and delete buttons. Hidden (but still taking up room) except on the current line,
   so the grid never jumps sideways. A fraction is one line, so they only sit on its top row. */
.line-tools {
  display: flex;
  gap: 2px;
}
.line:not(.is-current) .line-tools {
  visibility: hidden;
}
.line-tools button {
  font-size: 0.8em;
  padding: 0 4px;
}
.line-tools .line-del.is-confirm {
  background: var(--caution);
  color: #fff;
}
.note-body {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding: 0 14px;
}
/* A note is one grid row tall (more rows if the text wraps). It fills the sheet's width, and is never narrower than the grid. */

textarea.note {
  font: inherit;
  font-size: calc(1rem * var(--z));
  display: block;
  box-sizing: border-box;
  width: max(calc(var(--n) * var(--cell)), 100%);
  height: var(--cell);
  line-height: var(--cell);
  padding: 0 8px;
  margin: 0;
  border: none;
  box-shadow: inset 1px 0 #ccc, inset -1px 0 #ccc, inset 0 -1px #ccc;
  /* rule a line under every row of text, like the grid rows */
  background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--cell) - 1px), #ccc calc(var(--cell) - 1px), #ccc var(--cell));
  resize: none;
  overflow: hidden;
}
.sheet > .line:first-child textarea.note {
  box-shadow: inset 1px 0 #ccc, inset -1px 0 #ccc, inset 0 -1px #ccc, inset 0 1px #ccc;
}

/* The graph-paper grid. Monospace so every column is the same width.
   Nothing clips the grid, so the radical's hook can reach up past its row like it would on paper. */

.grid-scroll {
  flex: none;
}
.grid {
  display: grid;
  grid-template-columns: repeat(var(--n), var(--cell));
  grid-template-rows: repeat(var(--r), var(--cell));
  width: max-content;
  padding: 0 14px; /* side room for big parentheses */
  user-select: none;
  -webkit-user-select: none;
}
.cell {
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: monospace;
  font-size: calc(1.3rem * var(--z));
  cursor: text;
  touch-action: none;
}
.cell.c0 {
  border-left: 1px solid #ccc;
}
.sheet > .line:first-child .cell.r0 {
  border-top: 1px solid #ccc;
}
.cell span {
  display: inline-block;
  line-height: 1;
}
/* Symbols with a built-in subscript, like tα. line-height 0 keeps the cell from growing. */
.cell sub, .sym sub {
  font-size: 0.65em;
  line-height: 0;
}
.cell.is-sup span {
  font-size: 0.68em;
  transform: translateY(-0.55em);
}
.cell.is-sub span {
  font-size: 0.68em;
  transform: translateY(0.5em);
}
.cell.is-space span {
  color: #999;
  font-size: 0.75em;
}
.grid.is-armed .cell {
  cursor: crosshair;
}
.cell.is-sel {
  background: #cde;
}
.cell.is-cursor {
  outline: 2px solid #000;
  outline-offset: -2px;
  position: relative;
  z-index: 3;
}
.cell.hl-khaki {
  background: khaki;
}
.cell.hl-pink {
  background: pink;
}
.cell.hl-lightblue {
  background: lightblue;
}
.cell.hl-palegreen {
  background: palegreen;
}
.cell.is-sel[class*="hl-"] {
  outline: 2px solid #36c;
  outline-offset: -5px;
}

/* Structure drawn on the grid */
.deco {
  position: relative;
  pointer-events: none;
  z-index: 2;
}
.deco i {
  position: absolute;
  font-style: normal;
  line-height: 1;
}
.d-frac::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: -1px;
  height: 2px;
  background: #000;
}
.d-sqrt {
  border-top: 2px solid #000;
  margin-top: 3px;
  margin-right: 2px;
}
.d-sqrt i {
  font-size: calc(1.9rem * var(--z));
  left: -0.5em;
  top: -0.18em;
  transform: scaleY(var(--h));
  transform-origin: top left;
}
.d-paren i {
  font-size: calc(1.9rem * var(--z));
  top: 50%;
  transform: translateY(-50%) scaleY(var(--h));
}
.d-paren i:first-child {
  left: -0.2em;
}
.d-paren i:last-child {
  right: -0.2em;
}
.d-bar::before {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 3px;
  height: 2px;
  background: #000;
}
.d-hat i {
  font-size: calc(1.1rem * var(--z));
  left: 50%;
  top: -0.15em;
  transform: translateX(-50%);
}

/* Finished math panel */
.compiled {
  flex: none;
  height: 38vh;
  min-height: 5rem;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  border-top: 1px solid #999;
}
.handle {
  flex: none;
  height: 8px;
  cursor: ns-resize;
  touch-action: none;
  background: #ddd;
}
.compiled-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.cline {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.cln {
  flex: none;
  width: 2em;
  text-align: right;
}
.cmain {
  flex: 1;
  min-width: 0;
}
.cmath {
  overflow-x: auto;
}
.cmath mjx-container[display="true"] {
  margin: 0.15em 0 !important;
  text-align: left !important;
}
.cnote {
  margin: 0.15em 0;
  white-space: pre-wrap;
}
.src {
  margin: 0;
  white-space: pre-wrap;
}
.err {
  color: var(--caution);
}

@media print {
  html, body {
    height: auto;
    overflow: visible;
    display: block;
  }
  body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .topbar, .handle, .line-tools, .compiled-head .toggle {
    display: none !important;
  }
  .sheet-scroll, .grid-scroll, .compiled-body {
    overflow: visible;
  }
  .line, .cline {
    break-inside: avoid;
  }
  .cell.is-cursor {
    outline: none;
  }
  .cell.is-sel {
    background: none;
  }
  .compiled {
    height: auto !important;
    max-height: none;
  }
  .no-print, body.page nav, .page-nav {
    display: none;
  }
  /* "Print just the reference card" on docs.html. */
  body.print-card > :not(#refcard) {
    display: none !important;
  }
  table.ref tr {
    break-inside: avoid;
  }
}