/* Algebrainia widgets: everything <alg-saved-web>, <alg-saved-timeline>, <alg-typed-math>, <alg-explorer>
   and <alg-python-editor> need. One file to include; it pulls in the viewer and the themes.
   Colours come from the page's custom properties when it has them (--text, --muted,
   --line, --bg, --surface-2, --link, --accent, --accent-2), with plain fallbacks. */
@import url("timeweb.css");
@import url("themes.css");

alg-saved-web, alg-saved-timeline, alg-typed-math, alg-explorer, alg-python-editor { display: block; min-width: 0; }
.alg-widget {
  --alg-text: var(--text, #1b1b1b);
  --alg-muted: var(--muted, #666a70);
  --alg-line: var(--line, #dcdcdc);
  --alg-bg: var(--bg, #fff);
  --alg-surface: var(--surface-2, #f6f6f5);
  --alg-link: var(--link, #1f4fbf);
  margin: 1.25rem 0;
}

.alg-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: .6rem 0; font-size: .92rem; }
.alg-btn { font: inherit; font-size: .92rem; color: var(--alg-text); background: var(--alg-bg); border: 1px solid var(--alg-line); border-radius: 4px; padding: .4rem .85rem; cursor: pointer; }
.alg-btn:hover { border-color: var(--alg-muted); }
.alg-row select, .alg-row input[type="text"] { font: inherit; color: var(--alg-text); background: var(--alg-bg); border: 1px solid var(--alg-line); border-radius: 4px; padding: .3rem .4rem; max-width: 100%; }
.alg-row input[type="text"] { width: 3.5rem; }
.alg-status { color: var(--alg-muted); font-size: .88rem; }
.alg-pre { font: .82rem/1.5 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; margin: 0; min-height: 1.5em; }
.alg-error { color: #c0392b; }
.alg-note { color: var(--alg-muted); font-size: .88rem; margin: .4rem 0; }
.alg-h { font-size: 1rem; margin: 1.4rem 0 .5rem; }
.alg-h:first-child { margin-top: 0; }
.alg-out { min-width: 0; }
.alg-out:not(:empty) { margin-top: .75rem; }

/* typed math */
.alg-widget .alg-math, .alg-widget math-field { display: block; width: 100%; font-size: 1.4rem; padding: .3rem .5rem; border: 1px solid var(--alg-line); border-radius: 4px; background: var(--alg-bg); color: var(--alg-text); }
.alg-widget math-field:focus-within { outline: 2px solid var(--alg-link); outline-offset: 1px; }

/* explore */
.alg-families { border: 1px solid var(--alg-line); border-radius: 4px; margin: .75rem 0; padding: .6rem .9rem .8rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .3rem 1rem; font-size: .92rem; }
.alg-families legend { color: var(--alg-muted); padding: 0 .3rem; }
.alg-families label { display: flex; gap: .45rem; align-items: center; }

/* playground */
.alg-pg { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
.alg-pg > * { min-width: 0; }
@media (min-width: 960px) { .alg-pg { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.alg-code { width: 100%; min-height: 14rem; resize: vertical; font: .86rem/1.5 ui-monospace, Menlo, Consolas, monospace; color: var(--alg-text); background: var(--alg-surface); border: 1px solid var(--alg-line); border-radius: 4px; padding: .8rem; tab-size: 4; }

/* theme picker */
.alg-themes { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .6rem; }
.alg-chip { font: inherit; font-size: .8rem; text-transform: capitalize; color: var(--alg-text); background: var(--alg-bg); border: 1px solid var(--alg-line); border-radius: 4px; padding: .2rem .55rem; cursor: pointer; }
.alg-chip[aria-pressed="true"] { border-color: var(--alg-link); color: var(--alg-link); }