/* =========================================================================
   Merge sort applet -- everything on top of Pico CSS.
   The palette lives in the two blocks below; change it there.
   ========================================================================= */

:root {
  --pico-font-family-sans-serif: "Fira Sans", system-ui, sans-serif;
  --pico-font-family-monospace: "Fira Code", ui-monospace, monospace;
  --pico-font-family: var(--pico-font-family-sans-serif);

  --ms-line:    var(--pico-muted-border-color);
  --ms-face:    var(--pico-card-background-color);
  --ms-text:    var(--pico-color);
  --ms-dim:     var(--pico-muted-color);
  /* the -b tints are solid on purpose: cells sit on the dark node panel,
     so a translucent fill would let the panel muddy them */
  --ms-merge:   #c2740a;              /* a merge in progress */
  --ms-merge-b: #fbeeda;
  --ms-done:    #128a4a;              /* sorted */
  --ms-done-b:  #e4f3ea;
  --ms-panel:   #00000024;            /* the box that holds one call's cells */
  --ms-focus:   #0a6fc233;            /* halo around the current call */
  --ms-accent:  var(--pico-primary);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ms-merge:   #f0b429;
    --ms-merge-b: #3a2c0e;
    --ms-done:    #4ade80;
    --ms-done-b:  #10301f;
    --ms-panel:   #00000066;            /* a recess, so the cells sit on top of it */
    --ms-focus:   #7cb3ff33;
  }
}

[hidden] { display: none !important; }

/* --- page ---------------------------------------------------------------- */
main.container { max-width: min(1600px, 95vw); padding-block: 1.5rem 3rem; }
header { margin-bottom: 1.2rem; }
header h1 { margin-bottom: .2rem; font-size: 1.4rem; }
header p, #status { max-width: 74ch; }
header p { color: var(--ms-dim); font-size: .85rem; margin-bottom: 0; }

/* the input is set-and-forget, so it stays out of the way */
#setup { width: min(24rem, 100%); margin-bottom: .2rem;
         --pico-form-element-spacing-vertical: .3rem;
         --pico-form-element-spacing-horizontal: .55rem; }
#setup input, #setup button { font-size: .78rem; margin-bottom: 0; }
#setup input { font-family: var(--pico-font-family-monospace); }
#setup button { width: auto; }

/* --- controls ------------------------------------------------------------ */
#controls { margin-top: 1rem; }
#controls .bar { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; }
#controls .playback { flex: 0 0 auto; margin-bottom: 0; }
#controls .playback button {
  font-size: .72rem; padding: .2rem .5rem; margin-bottom: 0;
  --pico-border-radius: 3px;
}
#controls .playback button.wide { min-width: 5.2rem; }

.speed { display: flex; align-items: center; gap: .4rem; margin-bottom: 0;
         font-size: .72rem; color: var(--ms-dim); }
.speed input { width: 6rem; height: .5rem; margin-bottom: 0; }
.speed output { font-family: var(--pico-font-family-monospace); min-width: 3.2rem; }

#scrub { height: .5rem; margin: .5rem 0 .35rem; }

#status { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0;
          font-size: .82rem; min-height: 2.4em; }
#counter { font-family: var(--pico-font-family-monospace); color: var(--ms-dim);
           white-space: nowrap; }
#message { flex: 1; }
#message.bad { color: var(--pico-del-color, #c0392b); }

#options { display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; margin: .35rem 0 0; }
#options label { font-size: .75rem; margin-bottom: 0; }
#options input[type=checkbox] { --pico-form-element-spacing-vertical: 0; }

/* --- board + panels ------------------------------------------------------ */
/* One column on narrow screens; two once there is room for the panels to
   sit beside the tree.  The side column is as wide as the pseudocode needs. */
#work { display: grid; grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem; align-items: start; }

#stage {
  margin-top: .8rem;
  overflow-x: auto;
  border-top: 1px solid var(--ms-line);
  border-bottom: 1px solid var(--ms-line);
  padding-block: .5rem;
}
.board { display: block; }
.board text { font-family: var(--pico-font-family-monospace); }

.cell { fill: var(--ms-face); stroke: var(--ms-line); stroke-width: 1.5; }
.val  { font-size: 20px; fill: var(--ms-text); text-anchor: middle; dominant-baseline: central; }  /* board */

.cell.in { fill: var(--ms-face); }   /* input row: neutral, whatever the state */
.cell.pending, .val.pending { opacity: .4; }
.cell.pending { stroke-dasharray: 3 3; }
.cell.empty   { fill: none; stroke: var(--ms-line); stroke-dasharray: 2 3; opacity: .5; }
.cell.merging { stroke: var(--ms-merge); fill: var(--ms-merge-b); }
.val.merging  { fill: var(--ms-merge); }
.cell.done    { stroke: var(--ms-done); fill: var(--ms-done-b); }
.val.done     { fill: var(--ms-done); }

.cell.outrange, .val.outrange, .cell.used, .val.used { opacity: .35; }
.cell.written { stroke: var(--ms-accent); stroke-width: 3; }
.val.written  { fill: var(--ms-accent); font-weight: 500; }

.edge { stroke: var(--ms-line); stroke-width: 3; stroke-linecap: round; }
.edge.pending { opacity: .35; stroke-dasharray: 4 5; }
.edge.done { stroke: var(--ms-done); opacity: .6; }

.nodebg { fill: var(--ms-panel); stroke: var(--ms-line); stroke-width: 1; stroke-opacity: .65; }
.nodebg.pending { opacity: .3; }
.focus  { fill: var(--ms-focus); stroke: var(--ms-accent); stroke-width: 1.5; stroke-opacity: .35; }

/* board type -- keep in step with the px constants at the top of app.js */
.range   { font-size: 14px; fill: var(--ms-dim); }
.index   { font-size: 15px; fill: var(--ms-dim); text-anchor: middle; opacity: .55; }
.index.on{ opacity: 1; fill: var(--ms-accent); }
.section { font-size: 15px; fill: var(--ms-dim); letter-spacing: .04em; text-transform: uppercase; }
.rowlabel{ font-size: 17px; fill: var(--ms-dim); text-anchor: end; dominant-baseline: central; }
.rowtag  { font-size: 12px; fill: var(--ms-dim); text-anchor: end; dominant-baseline: central;
           opacity: .75; }
.mark    { font-size: 18px; fill: var(--ms-accent); text-anchor: middle; dominant-baseline: central; }
.mark.spent { fill: var(--ms-dim); opacity: .5; }
.split   { stroke: var(--ms-dim); stroke-width: 1.5; stroke-dasharray: 3 3; opacity: .6; }

/* --- legend -------------------------------------------------------------- */
#legend { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin: .5rem 0 0;
          font-size: .78rem; color: var(--ms-dim); }
.key::before {
  content: ""; display: inline-block; width: .8em; height: .8em;
  margin-right: .4em; vertical-align: -.05em; border-radius: 2px;
  border: 1px solid var(--ms-line); background: var(--ms-face);
}
.key.pending::before { border-style: dashed; opacity: .5; }
.key.empty::before   { border-style: dashed; background: none; }
.key.merging::before { border-color: var(--ms-merge); background: var(--ms-merge-b); }
.key.done::before    { border-color: var(--ms-done);  background: var(--ms-done-b); }

/* --- panels -------------------------------------------------------------- */
#panels { display: flex; flex-wrap: wrap; gap: 1rem; }
#panels > article { flex: 1 1 22rem; margin: 0; padding: 0; }
#panels > article > header { padding: .6rem 1rem; margin: 0; font-size: .8rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ms-dim); }
#panels > article > header small { text-transform: none; letter-spacing: 0; }

#code { margin: 0; padding: .8rem 1rem; background: none; font-size: .82rem;
        line-height: 1.55; overflow-x: auto; }
#code .line { display: block; padding: 0 .4rem; border-radius: 3px; white-space: pre; }
#code .line.head { margin-top: .55rem; }        /* breathing room before a procedure */
#code .line.now { background: var(--ms-merge-b); box-shadow: inset 2px 0 0 var(--ms-merge);
                  color: var(--ms-text); font-weight: 500; }

#stack { margin: 0; padding: .3rem 1rem 1rem 2.4rem;
         font-family: var(--pico-font-family-monospace); font-size: .8rem; }
#stack li { margin: .15rem 0; color: var(--ms-dim); }
#stack li.top { color: var(--ms-accent); font-weight: 500; }
#stack li.empty { list-style: none; margin-left: -1.2rem; }

/* Wide screen: the panels move into a column beside the tree.  This has to
   come after the rules above -- same specificity, so source order decides. */
@media (min-width: 1024px) {
  #work { grid-template-columns: minmax(0, 1fr) auto; }
  #panels { flex-direction: column; flex-wrap: nowrap; max-width: 28rem;
            position: sticky; top: .5rem; }   /* follows a tall tree */
  #panels > article { flex: 0 0 auto; }
}

footer { margin-top: 2rem; color: var(--ms-dim); }
footer kbd { font-size: .75rem; }

/* --- narrow screens ------------------------------------------------------ */
@media (max-width: 640px) {
  main.container { padding-block: 1rem 2rem; }
  #controls .playback { width: 100%; }
  #controls .playback button { flex: 1; padding-inline: .3rem; }
  #controls .playback button.wide { min-width: 0; }
  .speed { width: 100%; }
  .speed input { flex: 1; }
}