/* hosts/see-it-say-it/calc.css (CF3): the calculus see-it view (view/calc-see.js) and its callout (view/calc.js).
   Tokens come from ssi.css (--ink, --plate, --plate-line, --sun, --sun-soft, --sun-deep, --bevel, --chip, --go ...).
   index.html links this file after app.css (CF4). Colour is never the only carrier: signs carry "+" or the minus sign and a word, areas carry a
   hatch or dots and a word, a selected mark is larger and has a chip that names it. */

#calc .csee { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 780px; }
#calc .csee[hidden] { display: none; }

/* ---- the stem band: lead, stem facts, the question in a goal box */
body[data-subject="calculus"] #calc[data-see="yes"] { gap: 6px; }
.csee__stem { display: flex; flex-direction: column; gap: 3px; }
.csee__stem:empty { display: none; }
.csee__lead { margin: 0; font: 700 15px/1.3 var(--font-ui); color: var(--ink); }
.csee__facts { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 18px; font: 700 15px/1.3 var(--font-ui); color: var(--ink-2); }
.csee__ask { margin: 0; padding: 5px 12px; display: flex; align-items: baseline; gap: 8px; background: var(--sun-soft); border: 2px solid var(--sun-deep); border-radius: var(--r-md); font: 800 16px/1.35 var(--font-ui); color: var(--ink); }
.csee__show { flex: 0 0 auto; white-space: nowrap; background: var(--sun); border-radius: 8px; padding: 1px 10px; font-size: 15px; } /* ZU1 (ZU-3, PS3-10): the pill reads on one line */

/* ---- the plate */
/* The plate takes the height the See it column leaves (stem above, strip below) and the graph scales to fit it, keeping its proportions. */
body[data-subject="calculus"] #calc > .calc__see { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.calc__see > .csee { flex: 1 1 auto; min-height: 0; }
.csee__wrap { position: relative; flex: 1 1 0; min-height: 200px; max-height: 440px; width: 100%; border-radius: 16px; overflow: hidden; background: var(--plate); border-bottom: var(--bevel-lg) solid var(--bevel); }
.csee__canvas { position: absolute; inset: 0; }
.csee__svg { display: block; width: 100%; height: 100%; user-select: none; }
.csee__wrap[data-kind="table"] { flex: 0 0 auto; min-height: 0; max-height: none; }   /* CU1: the choices live in the right column now, so the table plate needs no room for a callout */
.csee__wrap[data-kind="table"] .csee-callout[data-corner] { left: 12px; right: 12px; bottom: 12px; top: auto; width: auto; max-height: calc(100% - 180px); }
.csee__wrap[data-kind="table"] .csee-chips { display: grid; grid-template-columns: repeat(2, 1fr); }
.csee__wrap[data-kind="table"] .csee__canvas { position: static; }
.csee__grid { stroke: var(--plate-line); stroke-width: 1.5; }
.csee__axis { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.csee__arrow { fill: var(--ink); }
.csee__tick { stroke: var(--ink); stroke-width: 2; }
.csee__ticklabel, .csee__marklabel, .csee__axisname { paint-order: stroke; stroke: var(--plate); stroke-width: 4px; stroke-linejoin: round; }
.csee__ticklabel { font: 700 13px var(--font-ui); fill: var(--ink-2); }
.csee__axisname { font: 700 15px var(--font-ui); font-style: italic; fill: var(--ink-2); }
.csee__marklabel { font: 400 16px var(--font-display); letter-spacing: 0.5px; fill: var(--ink); }
.csee__curve { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }

/* marked values: a dot on the curve and a circle on the axis, one button */
.csee__mark { cursor: pointer; outline: none; }
.csee__hit { fill: transparent; stroke: none; }
/* CU1 (CU-3): a marked value is a filled dot on the curve at (c, f(c)); the axis keeps a plain tick (an open circle would mean "excluded") */
.csee__curvedot { fill: var(--ink); stroke: var(--panel); stroke-width: 2; transition: r 80ms ease; }
.csee__marktick { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.csee__guide { stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 3 4; opacity: 0.35; }
.csee__mark:focus-visible .csee__curvedot, .csee__mark.is-hl .csee__curvedot { fill: var(--sun-deep); filter: drop-shadow(0 0 5px var(--sun)); r: 8px; }
.csee__mark:focus-visible .csee__marktick, .csee__mark.is-hl .csee__marktick, .csee__mark.is-on .csee__marktick { stroke: var(--sun-deep); stroke-width: 4.5; }
.csee__mark:focus-visible .csee__guide, .csee__mark.is-on .csee__guide, .csee__mark.is-hl .csee__guide { opacity: 1; }
.csee__mark:focus-visible .csee__curvedot { stroke: var(--ink); stroke-width: 4; }
.csee__mark.is-on .csee__curvedot, .csee__mark[aria-pressed="true"] .csee__curvedot { fill: var(--sun); stroke: var(--ink); stroke-width: 3; r: 9px; }

/* an interval selection: the band between two marks, sun-soft with a sun-deep top and bottom edge */
.csee__band { fill: var(--sun-soft); opacity: 0.8; }
.csee__band--all { opacity: 0.45; }
.csee__bandedge { stroke: var(--sun-deep); stroke-width: 3; }
.csee__above { fill: url(#csee-hatch); stroke: none; }
.csee__below { fill: url(#csee-dots); stroke: none; }
.csee__hatch { stroke: var(--ink-3); stroke-width: 1.6; }
.csee__dotfill { fill: var(--ink-3); }
.csee__arealabel { font-size: 15px; fill: var(--ink); paint-order: stroke; stroke: var(--sun-soft); stroke-width: 5px; stroke-linejoin: round; }

/* the caption is the button for the whole graph */
.csee__caption { cursor: pointer; outline: none; }
.csee__captionbox { fill: var(--panel); stroke: var(--bevel); stroke-width: 2.5; }
.csee__captiontext { font: 400 17px var(--font-display); letter-spacing: 0.5px; fill: var(--ink); }
.csee__caption:focus-visible .csee__captionbox { fill: var(--sun-soft); stroke: var(--sun-deep); filter: drop-shadow(0 0 4px var(--sun)); }
.csee__caption.is-on .csee__captionbox { fill: var(--sun); stroke: var(--sun-deep); }

/* "Selected" chip, and the hint before anything is selected */
/* CU1 (CU-1): the tip is a row under the plot, never over it: the hint, then what is selected and what comes next, beside the "Write your own statement" button */
.csee__tiprow { display: flex; align-items: center; gap: 8px; min-height: 46px; }   /* two lines of tip: the row keeps one height, so the plot never moves under the pointer when a value is picked */
.csee__selchip { flex: 1 1 auto; min-width: 0; margin: 0; padding: 3px 12px; border-radius: var(--r-sm); background: var(--sun-soft); border: 2px solid var(--sun-deep); font: 900 14px/1.3 var(--font-ui); color: var(--ink); }
.csee__selchip[hidden] { display: none; }
.csee__chipmain { margin-right: 10px; }
.csee__chiptip { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.csee__selchip.is-hint { text-align: left; background: var(--panel); border: 2px dashed var(--bevel); color: var(--ink-3); font-weight: 800; }
/* ---- HV3 (wave H1, ART-BRIEF-HOVER-1 H6, H7; H-R1, H-R3): the preview of what a click (mouse) or a lift (touch) would pick.
   Three looks for every pickable part: plain, previewed (about 40 percent of picked: a translucent fill and a dashed edge, no glow, no pulse), picked (.is-on, aria-pressed).
   The class .is-pv is put on the elements by calc-see.js while the pointer is on a part; it is the same for every part of its kind (H-R7). Keyboard focus and .is-hl keep their looks. */
.csee__pvtip { flex: 1 1 auto; background: var(--panel); border: 2px dashed var(--sun-deep); color: var(--ink); font-weight: 800; }
.csee__pvtip[hidden] { display: none; }
.csee__pvhalo { fill: var(--sun); fill-opacity: 0; stroke: var(--sun-deep); stroke-width: 2; stroke-dasharray: 3 3; stroke-opacity: 0; pointer-events: none; }
.csee__mark.is-pv .csee__pvhalo { fill-opacity: 0.4; stroke-opacity: 0.65; }
.csee__mark.is-pv:not(.is-on) .csee__curvedot { r: 7.2px; }
.csee__mark.is-pv:not(.is-on) .csee__marktick { stroke: var(--sun-deep); stroke-width: 3.4; stroke-opacity: 0.8; }
.csee__mark.is-pv:not(.is-on) .csee__guide { opacity: 0.6; }
.csee__pvband { display: none; pointer-events: none; }
.csee__pvband.is-pv { display: inline; }
.csee__pvfill { fill: var(--sun-soft); fill-opacity: 0.45; }
.csee__pvedge { stroke: var(--sun-deep); stroke-width: 2.5; stroke-dasharray: 7 5; stroke-opacity: 0.6; }
.csee__caption.is-pv:not(.is-on) .csee__captionbox { fill: var(--sun-soft); stroke: var(--sun-deep); stroke-dasharray: 5 4; }
.csee__cellpv { fill: var(--sun); fill-opacity: 0; stroke: var(--sun-deep); stroke-width: 3; stroke-dasharray: 6 4; stroke-opacity: 0; pointer-events: none; }
.csee__cell.is-pv .csee__cellpv { fill-opacity: 0.18; stroke-opacity: 0.7; }
.csee__stemfact.is-pv { outline: 2px dashed var(--sun-deep); outline-offset: 2px; }
.csee__td, .csee__rowbtn { position: relative; isolation: isolate; }
.csee__td::before, .csee__rowbtn::before { content: ""; position: absolute; inset: 0; border-radius: 12px; background: var(--sun-soft); opacity: 0; z-index: -1; pointer-events: none; }
.csee__td.is-pv::before, .csee__th.is-pv .csee__rowbtn::before { opacity: 0.55; }
.csee__td.is-pv-end:not(.is-end) { outline: 2px dashed var(--sun-deep); outline-offset: -1px; }
.csee__th.is-pv:not(.is-on) .csee__rowbtn { outline: 2px dashed var(--sun-deep); outline-offset: -2px; }
/* HF3 (H17): the whole-table preview is one dashed box round the whole table (the header buttons then carry no box of their own) */
.csee__table.is-pv-all { outline: 2px dashed var(--sun-deep); outline-offset: 3px; border-radius: 14px; }
.csee__table.is-pv-all .csee__th.is-pv:not(.is-on) .csee__rowbtn { outline: none; }
.csee__ownbtn { flex: 0 0 auto; margin-left: auto; min-height: 34px; padding: 0 16px; font-size: 14px; }

/* ---- the sign chart strip */
.csee__strip { width: 100%; }
.csee__strip:empty { display: none; }
.csee__signsvg { display: block; width: 100%; height: auto; background: var(--plate); border-radius: 12px; }
.csee__signhead { font-size: 12px; fill: var(--ink-2); letter-spacing: 0.5px; }
.csee__signhead--name { font-size: 15px; fill: var(--ink); }
.csee__cell { cursor: pointer; outline: none; }
.csee__cellbox { fill: var(--panel); stroke: var(--bevel); stroke-width: 2.5; stroke-dasharray: 5 4; }
.csee__cell.is-pos .csee__cellbox { fill: #EAF8EF; stroke: var(--go-deep); stroke-dasharray: none; }
.csee__cell.is-neg .csee__cellbox { fill: #FFEBDA; stroke: var(--cat-thm); stroke-dasharray: none; }
.csee__cell.is-zero .csee__cellbox { fill: var(--chip); stroke: var(--ink-2); stroke-dasharray: none; }
.csee__cell:focus-visible .csee__cellbox { stroke: var(--sun-deep); stroke-width: 3.5; }
.csee__cell.is-on .csee__cellbox { stroke: var(--sun-deep); stroke-width: 4; stroke-dasharray: none; }
.csee__cellsign { font-size: 17px; fill: var(--ink); }
.csee__cellsign--sym { font-size: 26px; }
.csee__legend { margin: 3px 2px 0; font: 700 12px/1.3 var(--font-ui); color: var(--ink-2); }
.csee__tip { margin: 6px 2px 0; font: 700 14px var(--font-ui); color: var(--ink-2); border-left: 4px solid var(--sun); padding-left: 10px; }

/* ---- the table */
.csee__tablewrap { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.csee__captionrow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; min-height: 30px; }
.csee__captionrow .csee__captiontext { font: 400 18px var(--font-display); }
.csee__qmark { font: 800 15px var(--font-ui); color: var(--ink-2); background: var(--panel); border-radius: var(--r-sm); padding: 2px 10px; }
.csee__table { align-self: flex-start; border-collapse: separate; border-spacing: 6px; }
.csee__th { padding: 0; text-align: center; }
.csee__rowbtn { min-width: 72px; height: 48px; border: 0; border-radius: 12px; background: var(--chip); color: var(--ink); font-size: 18px; border-bottom: 4px solid var(--bevel); }
.csee__th.is-on .csee__rowbtn { background: var(--sun-soft); border-bottom-color: var(--sun-deep); }
.csee__rowbtn:focus-visible, .csee__colbtn:focus-visible { outline: 4px solid var(--sun); outline-offset: 2px; }
.csee__td { width: 72px; height: 48px; padding: 0; text-align: center; background: var(--panel); border-radius: 12px; border-bottom: 4px solid var(--bevel); font: 800 20px var(--font-ui); color: var(--ink); cursor: pointer; }
.csee__td.is-hl { background: var(--sun-soft); box-shadow: 0 0 8px var(--sun); }
.csee__td.is-between { background: var(--sun-soft); }
.csee__td.is-on { background: var(--sun-soft); border-bottom-color: var(--sun-deep); }
.csee__td.is-end { outline: 3px solid var(--sun-deep); outline-offset: -1px; }
.csee__colbtn { width: 100%; height: 100%; border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; }

/* ---- the callout: opens in the corner of the plate farthest from the selection */
.csee__overlay { position: absolute; inset: 0; pointer-events: none; }
.csee-callout { pointer-events: auto; width: 300px; max-height: calc(100% - 20px); overflow: auto; right: auto; bottom: auto; left: auto; top: auto; }
.csee-callout[hidden] { display: none; }
.csee-callout[data-corner="br"] { right: 12px; bottom: 12px; }
.csee-callout[data-corner="bl"] { left: 12px; bottom: 12px; }
.csee-callout[data-corner="tr"] { right: 12px; top: 50px; }
.csee-callout[data-corner="tl"] { left: 12px; top: 50px; }
.csee-callout { padding: 8px 10px; gap: 6px; }
.csee-callout.is-dragging { opacity: 0.92; }
.csee-callout__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: grab; touch-action: none; }
.csee-callout__head:active { cursor: grabbing; }
.csee-callout__title { margin: 0; font-size: 17px; color: var(--ink); }
.csee-callout__title::before { content: "\2807"; margin-right: 6px; color: var(--ink-3); }
.csee-callout__close { min-height: 32px; min-width: 32px; padding: 0 8px; font-size: 20px; line-height: 1; border-bottom-width: 3px; }
.csee-chips { flex-direction: column; flex-wrap: nowrap; gap: 6px; }
.csee-chips { gap: 4px; }
.csee-chips .calc__chip { width: 100%; min-height: 34px; padding: 3px 10px; font-size: 14px; line-height: 1.2; border-bottom-width: 3px; }
.csee-typed { display: flex; flex-direction: column; gap: 6px; background: var(--chip); border-radius: var(--r-md); padding: 6px 10px 8px; }
.csee-typed__row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font: 700 14px/1.3 var(--font-ui); }
.csee__num { width: 84px; min-height: 34px; font: 800 15px var(--font-ui); }
select.csee__num { width: auto; min-width: 64px; }
.csee-typed__add { align-self: flex-start; min-height: 34px; padding: 0 14px; font-size: 14px; border-bottom-width: 4px; }
.csee-callout__other { min-height: 36px; font-size: 14px; }

/* ---- "Other..." and the PR2 statement builder under it */
.calc__other { width: 100%; max-width: 780px; }
.calc__other > summary { list-style: none; display: inline-flex; align-items: center; padding: 0 16px; min-height: 34px; font-size: 14px; cursor: pointer; }
.calc__other > summary::-webkit-details-marker { display: none; }
#calc[data-see="no"] .calc__other > summary { display: none; }
.calc__other[open] > summary { margin-bottom: 10px; }
.calc__builder { display: flex; flex-direction: column; gap: 12px; }

/* ---- CU1 (CU-5): the choices and the own-statement panel in the right column (the rules CX1 injected from calc.js, folded in) */
/* Two columns of choices so every one shows without an inner scroll at 1366 by 768; if the proof column is ever too short (a table board has seven typed choices) the
   list scrolls under its own header, with a bar that is always drawn (overflow-y: scroll with a styled scrollbar, because the overlay scrollbars of some systems stay
   hidden until the pointer is over them: PS2-5). */
.sisi-callout.csee-callout--col { position: static; width: auto; max-width: none; max-height: none; margin: 0; overflow: hidden; flex: 0 1 auto; min-height: 0; z-index: auto; padding: 8px 10px; gap: 6px; }
.sisi-callout.csee-callout--col[hidden] { display: none; }
.csee-callout--col .csee-callout__head { cursor: default; touch-action: auto; flex: 0 0 auto; }
.csee-callout--col .csee-callout__title::before { content: none; margin: 0; }
.csee-callout--col .csee-callout__show { min-height: 32px; padding: 0 12px; font-size: 14px; border-bottom-width: 3px; }
.csee-callout--col .csee-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 6px; margin: 0; padding: 0 6px 0 0; list-style: none; flex: 0 1 auto; min-height: 0; overflow-y: scroll; }
.csee-callout--col .csee-chips::-webkit-scrollbar, .calc-own .calc__chips::-webkit-scrollbar { width: 12px; }
.csee-callout--col .csee-chips::-webkit-scrollbar-track, .calc-own .calc__chips::-webkit-scrollbar-track { background: var(--chip); border-radius: 6px; }
.csee-callout--col .csee-chips::-webkit-scrollbar-thumb, .calc-own .calc__chips::-webkit-scrollbar-thumb { background: var(--bevel); border-radius: 6px; border: 2px solid var(--chip); }
.csee-callout--col .csee-chips > li { min-width: 0; }
.csee-callout--col .csee-chips > li.csee-typed { grid-column: 1 / -1; }
.csee-callout--col .csee-chips .calc__chip { height: 100%; min-height: 30px; padding: 2px 10px; }
.csee-callout--col .csee-typed { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px; }
.csee-callout--col .csee-typed__add { align-self: center; flex: 0 0 auto; min-height: 30px; }
#say-panel:has(.csee-callout--col:not([hidden])) #steps, #say-panel:has(.calc-own:not([hidden])) #steps { flex: 1 6 auto; }
.csee-callout--col .calc__note:empty { display: none; }
.csee-callout--col .csee-callout__other { flex: 0 0 auto; align-self: flex-start; }

/* "Write your own statement": a panel of its own under the proof rows, with a title and a Cancel button; the kinds scroll under the blanks and the Add button */
.sisi-callout.calc-own { position: static; width: auto; max-width: none; max-height: none; margin: 0; overflow: hidden; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; z-index: auto; padding: 8px 10px; gap: 6px; }
.sisi-callout.calc-own[hidden] { display: none; }
.calc-own__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 0 0 auto; cursor: default; }
.calc-own__cancel { min-height: 32px; padding: 0 14px; font-size: 14px; border-bottom-width: 3px; }
.calc-own__body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.calc-own .calc__builder { flex: 1 1 auto; min-height: 0; gap: 6px; }
.calc-own .calc__build { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; min-height: 0; }   /* app.css reserves 148px for the build area; the panel does not */
.calc-own .calc__sentence { flex-wrap: wrap; }
.calc-own .calc__chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 6px; margin: 0; padding: 0 6px 0 0; list-style: none; flex: 1 1 auto; min-height: 0; overflow-y: scroll; align-content: start; }
.calc-own .calc__chips > li { min-width: 0; }
.calc-own .calc__chips .calc__chip { width: 100%; height: 100%; min-height: 30px; padding: 2px 10px; font-size: 14px; line-height: 1.2; border-bottom-width: 3px; }
.calc-own .calc__waits { display: none; }
/* on a see-it board the details under the plot is not used; the button in the row under the plot opens the panel */
#calc[data-own="col"] .calc__other { display: none; }

/* CU1 (CU-7, PS2-22): the exam sentence marks f and f' with a <u> element, but it carries no underline (it looked like a link or a typo) */
u.calc-name { text-decoration: none; }