/* The combined playground's additions to the playground's stylesheet, /style.css, which it loads first: the shell of
   variant a on prototype/combined (combined Decided 15, combined Decided 20). It uses the playground's colour tokens
   alone, so light and dark follow them. The server gives it without a session, since it holds no secret. */

/* The top bar: the brand, the views as tabs, the total drawn, Log out and the theme */
.va-top .brand { margin-right: 4px; }
.viewtabs button { padding: 0 16px; font-weight: 550; }
.drawn { font-size: 13px; color: var(--muted); white-space: nowrap; }
.drawn b { color: var(--text); font-weight: 600; }
.drawn.err { color: var(--err); white-space: normal; }
.num { font-variant-numeric: tabular-nums; }
.btn.logout { gap: 6px; padding: 0 10px; text-decoration: none; }

/* The bar under it, with the controls of the view open */
.va-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 8px 16px;
  border-bottom: 1px solid var(--border); background: var(--surface-2);
}

/* Each view fills the page under the top bar; Runs and Measure scroll within it */
.view { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* The view Runs: the loop's choice, the rounds and Run in the view's bar, the ask on the left and the run on the right,
   like the program and the answer sets of Editor */
.runs-form { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.rounds { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.rounds input { width: 72px; color: var(--text); }
.btn.fill { color: var(--accent); }
.main.runs { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.ask-pane {
  display: flex; flex-direction: column; min-height: 0; overflow: auto; border-right: 1px solid var(--border);
  background: var(--surface);
}
.ask-label { padding: 14px 16px 4px; font-size: 12px; font-weight: 650; color: var(--muted); }
.ask-label[hidden] { display: none; }
.ask-ta {
  flex: 1 1 0; min-height: 140px; width: 100%; padding: 2px 16px 14px; border: 0; border-bottom: 1px solid var(--border);
  background: transparent; color: var(--text); font: 15px/1.6 var(--ui); resize: none; outline: none;
}
.ask-ta[hidden] { display: none; }
.ask-ta:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ask-ta.code { font: 13.5px/22px var(--mono); }
.ask-pane .foot { margin-top: auto; border-top: 0; }
.run-pane { grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }
.out h3.sub { margin: 4px 0 8px; font-size: 13px; font-weight: 650; }
.out .note code { font-size: 12.5px; }
.out .note.after { margin: 8px 0 0; }
.out .rows { margin-bottom: 12px; }
.out .atoms + .round, .out .rows + .round { margin-top: 22px; }
.out .words { margin: 0 0 12px; font-size: 15px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.out .back { margin-bottom: 14px; }
.say { margin: 0 0 12px; padding: 8px 12px; border-radius: 8px; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
pre.reply {
  margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  font: 13px/20px var(--mono); white-space: pre-wrap; overflow-wrap: anywhere;
}
/* A program with its line numbers and the Editor's colours; a line that clingo or the unsat core marks */
.codeblock {
  margin: 0 0 12px; padding: 8px 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  font: 13px/20px var(--mono); overflow-x: auto;
}
.cl { position: relative; min-height: 20px; padding: 0 12px 0 44px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cl::before {
  content: attr(data-n); position: absolute; left: 0; width: 32px; text-align: right; color: var(--faint); font-size: 11.5px;
}
.cl.m-error { background: var(--err-bg); box-shadow: inset 3px 0 0 var(--err); }
.cl.m-warning { background: var(--warn-bg); box-shadow: inset 3px 0 0 var(--warn); }
.cl.m-core { background: var(--core-bg); box-shadow: inset 3px 0 0 var(--core-line); }
.cl.m-error::before { color: var(--err); font-weight: 700; }
.cl.m-warning::before { color: var(--warn); font-weight: 700; }
.cl.m-core::before { color: var(--core); font-weight: 700; }
.codeblock.dim .cl:not(.m-core) { opacity: .55; }
.round { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); }
.round-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 10px; }
.round-head h3 { margin: 0; font-size: 14px; font-weight: 700; }

/* The view Measure: the loop's choice, the rounds and Measure in the view's bar, then the count, its aside, the strip
   and the loop's name in one panel, then one line for each task, a finished one a button that opens its run */
.measure { flex: 1; min-height: 0; overflow: auto; padding: 24px 16px 48px; }
.measure-col { display: grid; gap: 16px; max-width: 840px; margin: 0 auto; }
.m-hero {
  display: grid; gap: 12px; padding: 20px 20px 18px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface);
}
.m-hero p { margin: 0; }
.m-hero p[hidden] { display: none; }
.m-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.m-big .n { font-size: 52px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.m-big .of { font-size: 18px; color: var(--muted); }
.strip { display: flex; gap: 4px; }
.strip:empty { display: none; }
.strip span { flex: 1; height: 10px; border-radius: 3px; background: var(--border); }
.strip .right { background: var(--ok); }
.strip .wrong { background: var(--err); }
.strip .none { background: var(--warn); }
.strip .running { background: var(--accent-line); }
.strip .stop { background: var(--err-bg); box-shadow: inset 0 0 0 1px var(--err); }
.measure-col .say { margin: 0; }
.measure-col .say[hidden] { display: none; }
.m-lines {
  list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  overflow: hidden;
}
.m-lines:empty { display: none; }
.m-lines li + li { border-top: 1px solid var(--border); }
.m-line {
  display: grid; grid-template-columns: 104px minmax(0, 1fr) auto 128px; align-items: center; gap: 6px 14px;
  width: 100%; padding: 11px 16px; border: 0; background: none; color: var(--text); font: inherit; text-align: left;
}
.m-line > .t:last-child { grid-column: 2 / -1; }
button.m-line { cursor: pointer; }
button.m-line:hover { background: var(--surface-2); }
button.m-line:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.m-line.idle { color: var(--muted); }
.m-line.stop { background: var(--err-bg); }
.m-line .t { display: grid; min-width: 0; }
.m-line .t b { font-weight: 600; }
.m-line .first { overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.m-line .first.full { white-space: normal; }
.m-line .g .muted { font-size: 13px; }
.m-line .r { font-size: 13px; text-align: right; white-space: nowrap; }

/* The login page: one card in the page's middle, light or dark by the system's mode alone (combined Decided 38) */
.login-page { display: grid; place-items: center; min-height: 100dvh; padding: 24px 16px; }
.login-card {
  display: grid; gap: 16px; width: min(380px, 100%); padding: 26px 24px 24px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.login-card h1 { margin: 4px 0 0; font-size: 20px; }
.login-card .lede { margin: -8px 0 0; font-size: 13.5px; color: var(--muted); }
.login-card label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.login-card .field { width: 100%; color: var(--text); font-size: 15px; }
.login-card .btn.primary { width: 100%; margin-top: 4px; }
.alert { margin: 0; padding: 8px 12px; border-radius: 8px; background: var(--err-bg); color: var(--err); font-size: 14px; }

/* A phone: the tabs take a row of their own under the brand, and the Editor's bar puts the example and Solve on one
   line and the count on the next */
@media (max-width: 860px) {
  .drawn .long, .btn.logout .lbl { display: none; }
  .btn.logout { width: var(--tap); padding: 0; }
  .va-top .brand { flex: 0 0 auto; }
  .va-top .spacer { display: block; }
  .va-top .viewtabs { order: 5; flex: 1 1 100%; }
  .viewtabs button { flex: 1; padding: 0 8px; }
  .va-bar .examples { order: 1; flex: 1 1 0; min-width: 0; }
  .va-bar .solve { order: 2; }
  .va-bar .count { order: 3; flex: 1 1 100%; }
  .view { flex: none; }
  /* Runs: the loop's choice takes a row, the rounds and Run the next; the ask stands above the run */
  .loopseg { flex: 1 1 100%; }
  .loopseg button { flex: 1; padding: 0 6px; }
  .va-bar .run { margin-left: auto; }
  .runs-form { flex: none; }
  .main.runs { grid-template-columns: minmax(0, 1fr); }
  .ask-pane { border-right: 0; border-bottom: 1px solid var(--border); overflow: visible; }
  .ask-ta { flex: none; min-height: 190px; }
  .ask-ta.code { min-height: 160px; }
  /* Measure: the rounds and Measure share the row under the loop's choice; a line puts its badges first, then the
     task with its first line whole, then its rounds and what it drew */
  .measure { overflow: visible; padding: 16px 16px 32px; }
  .m-hero { padding: 16px; }
  .m-big .n { font-size: 44px; }
  .m-line {
    grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "g rb" "t t" "r r"; gap: 6px 8px; padding: 11px 14px;
  }
  .m-line .g { grid-area: g; }
  .m-line .rb { grid-area: rb; justify-self: start; }
  .m-line .t { grid-area: t; }
  .m-line .r { grid-area: r; text-align: left; font-size: 12.5px; }
  .m-line .first { white-space: normal; }
  /* A line not yet done has no run's badge: its name stands beside its number or state, its first line under both */
  div.m-line { grid-template-areas: "g rb" "t t"; }
  div.m-line > .t { display: contents; }
  div.m-line > .t b { grid-area: rb; min-width: 0; }
  div.m-line > .t .first { grid-area: t; }
}