/* css/style.css — WebCAS notebook */
:root {
  --bg: #fafaf9; --panel: #ffffff; --fg: #1c1d1f; --muted: #6b7075; --line: #e2e2df;
  --accent: #2459d6; --err: #b42318; --err-bg: #fdf1f0; --warn: #9a5b07; --warn-bg: #fdf7e8;
  --ok: #17803d;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17181a; --panel: #1f2023; --fg: #e5e5e2; --muted: #9a9ea3; --line: #313236;
    --accent: #7aa2ff; --err: #ff8a80; --err-bg: #3a1f1d; --warn: #f0b75a; --warn-bg: #352a17;
    --ok: #4ade80;
  }
}

html, body { height: 100%; margin: 0; }
body {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--bg); color: var(--fg); font: 15px/1.45 var(--sans);
}

/* ---------------------------------------------------------------- header */
.bar {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .4rem 1rem; background: var(--panel); border-bottom: 1px solid var(--line);
}
.brand { margin: 0 .5rem 0 0; font-size: 1rem; font-weight: 650; letter-spacing: .01em; }
.spacer { flex: 1; }
.status { font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.status::before {
  content: ''; display: inline-block; width: .55em; height: .55em; margin-right: .45em;
  border-radius: 50%; background: var(--muted); vertical-align: .05em;
}
.status[data-state="idle"]::before { background: var(--ok); }
.status[data-state="busy"]::before { background: #e8a317; animation: pulse 1s ease-in-out infinite; }
.status[data-state="error"]::before { background: var(--err); }

.btn {
  font: inherit; font-size: .85rem; padding: .25rem .75rem; cursor: pointer;
  color: var(--fg); background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
}
.btn:hover:not(:disabled) { border-color: var(--muted); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { color: #fff; background: var(--accent); border-color: var(--accent); }
.btn.danger:not(:disabled) { color: var(--err); border-color: currentColor; }

/* ---------------------------------------------------------------- notebook */
.notebook { overflow: auto; }
.cells { max-width: 100rem; margin: 0 auto; padding: 1rem 1.25rem 2.5rem; }

.cell {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: .75rem;
  padding: .45rem 0; border-bottom: 1px solid var(--line);
}
.cell > :not(.label) { grid-column: 2; min-width: 0; }

.label {
  grid-column: 1; grid-row: 1; justify-self: end; align-self: start;
  font: .85rem/1.6 var(--mono); color: var(--muted); background: none; border: 0;
  padding: 0 .3rem; border-radius: 4px;
}
.label:enabled { color: var(--accent); cursor: pointer; }
.label:enabled:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.cell[data-state="error"] .label { color: var(--err); }
.cell[data-state="aborted"] .label { color: var(--warn); }
.cell[data-state="running"] .label::before {
  content: ''; display: inline-block; width: .8em; height: .8em; vertical-align: -.1em;
  border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%;
  animation: spin .8s linear infinite;
}

.in-row { display: flex; align-items: flex-start; gap: .5rem; }
.src {
  flex: 1; min-width: 0; margin: 0; font: .9rem/1.6 var(--mono);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.cell[data-state="queued"] .src { color: var(--muted); }
.meta { font-size: .75rem; line-height: 1.9; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

.tools { display: flex; gap: .25rem; opacity: 0; transition: opacity .12s; }
.cell:hover .tools, .tools:focus-within { opacity: 1; }
@media (hover: none) { .tools { opacity: 1; } }
.tool {
  font: .72rem/1.5 var(--sans); padding: .05rem .45rem; cursor: pointer; white-space: nowrap;
  color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
}
.tool:hover:not(:disabled) { color: var(--fg); border-color: var(--muted); }
.tool:disabled { opacity: .4; cursor: default; }

.out { display: flex; align-items: flex-start; gap: .5rem; margin-top: .15rem; }
.out > .tools { padding-top: .3rem; }
@media (max-width: 640px) { .out { flex-direction: column-reverse; } }

.value { flex: 1; min-width: 0; }
.value .math { overflow-x: auto; overflow-y: hidden; padding: 0.15em 0 0.25em; }
.value .raw { overflow-x: auto; }
.value .raw { display: none; }
.value.show-raw .raw { display: block; }
.value.show-raw .math { display: none; }
.raw, .math.pending {
  margin: 0; font: .9rem/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere;
}
.math.pending { color: var(--muted); }
.value mjx-container[jax="CHTML"][display="true"] { text-align: left; margin: .2em 0; }

.prints { margin: .2rem 0; padding-left: .6rem; border-left: 2px solid var(--line); }
.prints .value mjx-container[jax="CHTML"][display="true"] { margin: .05em 0; }
.note { font-size: .8rem; color: var(--muted); font-style: italic; }

.error {
  flex: 1; min-width: 0; padding: .35rem .6rem; border-radius: 6px;
  font-size: .9rem; color: var(--err); background: var(--err-bg);
}
.cell[data-state="aborted"] .error { color: var(--warn); background: var(--warn-bg); }
.error-kind { font-weight: 600; }
.error-where { color: var(--muted); }
.caret { margin: .3rem 0 0; font: .85rem/1.35 var(--mono); color: var(--fg); white-space: pre; overflow-x: auto; }
.stack summary { cursor: pointer; font-size: .8rem; margin-top: .3rem; }
.stack pre { font: .75rem/1.35 var(--mono); white-space: pre-wrap; color: var(--fg); }

.notice {
  margin: .5rem 0; padding: .45rem .7rem; border-radius: 6px; font-size: .88rem;
  color: var(--muted); background: var(--panel); border: 1px solid var(--line);
}
.notice.warn { color: var(--warn); background: var(--warn-bg); border-color: transparent; }
.notice.error { color: var(--err); background: var(--err-bg); border-color: transparent; }
.example {
  font: .82rem var(--mono); margin: .15rem 0; padding: .05rem .4rem; cursor: pointer;
  color: var(--accent); background: none; border: 1px solid var(--line); border-radius: 4px;
}
.example:hover { border-color: var(--accent); }

/* ---------------------------------------------------------------- command line */
.dock { padding: .55rem 1rem .4rem; background: var(--panel); border-top: 1px solid var(--line); }
.input-row { max-width: 72rem; margin: 0 auto; display: flex; align-items: flex-end; gap: .5rem; }
.prompt { font: 1.05rem var(--mono); color: var(--accent); padding-bottom: .42rem; }
#input {
  flex: 1; min-width: 0; box-sizing: border-box; resize: none; max-height: 40vh; overflow-y: auto;
  font: .95rem/1.45 var(--mono); padding: .4rem .55rem; tab-size: 2;
  color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
}
#input:focus { outline: 2px solid color-mix(in srgb, var(--accent) 30%, transparent); border-color: var(--accent); }
.hint { max-width: 72rem; margin: .3rem auto 0; font-size: .74rem; color: var(--muted); }
.hint.warn { color: var(--warn); }
.copyright { font-size: .74rem; color: var(--muted); opacity: 0.5; position: fixed; bottom: 2px; right: 2px; }

@media (max-width: 640px) {
  body { font-size: 14px; }
  .cells { padding: .75rem .6rem 2rem; }
  .cell { grid-template-columns: 2.9rem minmax(0, 1fr); column-gap: .45rem; }
  .hint { display: none; }
  .copyright { display: none; }
}

.logo { height: 32px; margin-bottom: -13px; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .35; } }

/* ---------------------------------------------------------------- dialogs */
.dialog {
  min-width: min(26rem, 90vw); max-width: 92vw; padding: 1rem 1.2rem;
  color: var(--fg); background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 40px rgb(0 0 0 / .25);
}
.dialog::backdrop { background: rgb(0 0 0 / .3); }
.dialog h2 { margin: 0 0 .3rem; font-size: 1.05rem; }
.dialog form { display: grid; gap: .65rem; }
.dialog label { display: grid; gap: .2rem; font-size: .88rem; }
.dialog label.check { display: flex; align-items: center; gap: .5rem; }
.dialog input[type="number"] {
  font: .9rem var(--mono); padding: .3rem .45rem;
  color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
}
.dialog input:invalid { border-color: var(--err); }
.fine { margin: 0; font-size: .78rem; color: var(--muted); }
.actions { display: flex; align-items: center; gap: .5rem; margin-top: .3rem; }
.file-grid { display: grid; grid-template-columns: auto 1fr; gap: .5rem .9rem; align-items: center; }
.file-grid .btn { text-align: left; white-space: nowrap; }
@media (max-width: 640px) { .file-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- help panel */
body { grid-template-columns: minmax(0, 1fr) auto; }
.bar { grid-column: 1 / -1; }
.notebook { grid-column: 1; grid-row: 2; }
.dock { grid-column: 1; grid-row: 3; }
.help {
  grid-column: 2; grid-row: 2 / 4; width: 27rem; min-height: 0;
  display: flex; flex-direction: column; background: var(--panel); border-left: 1px solid var(--line);
}
.help[hidden], .help [hidden] { display: none !important; }
.help-head { display: flex; align-items: center; gap: .5rem; padding: .5rem .8rem; border-bottom: 1px solid var(--line); }
.help-head h2 { margin: 0; font-size: 1rem; }
.help-search {
  flex: 1; min-width: 0; font: .88rem var(--sans); padding: .3rem .5rem;
  color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
}
.help-body { flex: 1; overflow: auto; padding: .2rem .9rem 1.5rem; font-size: .86rem; }
.help h3 { margin: 1rem 0 .4rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.help code { font: .8rem var(--mono); background: var(--bg); padding: 0 .2em; border-radius: 3px; }
.syntax { width: 100%; border-collapse: collapse; }
.syntax td { padding: .25rem .5rem .25rem 0; vertical-align: top; border-bottom: 1px solid var(--line); }
.syntax td:first-child { width: 44%; font: .8rem/1.45 var(--mono); white-space: pre-wrap; }
.fn { padding: .4rem .3rem; border-bottom: 1px solid var(--line); border-radius: 4px; }
.fn.hit { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.fn .sig { font: 600 .82rem/1.4 var(--mono); }
.fn p { margin: .15rem 0 .3rem; }
@media (max-width: 900px) {
  .help {
    position: fixed; top: 3rem; right: 0; bottom: 0; width: min(27rem, 100vw); z-index: 5;
    box-shadow: -8px 0 30px rgb(0 0 0 / .2);
  }
}

.value .plot svg { display: block; max-width: 100%; height: auto; }
.value.show-raw .plot { display: none; }

@media print
{
  body { display: block; }
  .bar, .notice, .info, .dock { display: none !important; }
  body, .cells, .notebook { background: none !important; }
  .cell { display: grid !important; background: none !important; }
  .cell .tools { display: none !important; }
}