/* ==========================================================================
   A code block is a window.

   THE BAR WAS ALREADY THERE and half of it was empty. `.code-block` has carried
   a strip above the code since the first practical course: the language on the
   left, the copy button on the right. But 1,391 of the blocks in
   `linux-terminal` are terminal recordings, and a recording has no language to
   name — so on the course where code blocks are most of the screen, that strip
   was a blank rule with a button at the end of it.

   A window is what the strip already looked like, so this finishes the thought:
   a TAB on the left naming what is open, and three dots on the right. Nothing
   is being decorated that was not already drawn; an empty bar is being given
   something to say.

   THE DOTS DO NOTHING AND ARE `aria-hidden`. They are the shape of a window and
   not a control — a student who tabs to a close button that cannot close
   anything has been lied to, and a screen reader announcing three unlabelled
   buttons has been given three pieces of nothing. They are `<i>` elements, not
   `<button>`s, for the same reason.

   THEY ARE NOT ANOTHER SYSTEM'S DOTS, either. The red-amber-green of macOS is
   three colours from outside this palette, on a page whose entire argument is
   that it has three. These are `--wire`, the same line the block is drawn with.

   THIS FILE EXISTS RATHER THAN A DOZEN LINES IN `portal.css`, because that file
   and `base.css` came from `portal-frontend` byte for byte and nothing is added
   to them here. Every selector below carries `.code-win`, which is ours: it
   cannot reach an element of the copied markup, and `tools/check-css` is what
   holds that.
   ========================================================================== */

/* The bar grows a little and its contents sit on the bottom edge, which is what
   makes the tab look attached to the code rather than floating over it. */
.code-win .code-bar{
  align-items:flex-end;
  padding:6px 7px 0 9px;
  min-height:34px;
}

/* A TAB OVERLAPS THE LINE IT SITS ON. `margin-bottom:-1px` puts its own bottom
   border on top of the bar's, and painting that border in `--panel` — the
   colour of the code area below — opens the tab into the window. Without it
   there is a hairline across the mouth of the tab and the whole thing reads as
   a rectangle with a smaller rectangle on it. */
.code-win .win-tab{
  display:flex;align-items:center;gap:7px;
  margin-bottom:-1px;padding:5px 12px 6px;
  border:1px solid var(--wire);border-bottom-color:var(--panel);
  border-radius:5px 5px 0 0;background:var(--panel);
  font-family:'IBM Plex Mono',monospace;font-size:.68rem;color:var(--paper);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70%;
}
.code-win .win-icon{
  display:grid;place-items:center;flex:0 0 auto;
  width:13px;height:13px;color:var(--phosphor-dim);
}
.code-win .win-icon svg{width:13px;height:13px}

/* `margin-left:auto` AND NOT `space-between`, because the tab is optional: a
   fence with no language and no prompt has nothing true to write on one, and
   `space-between` would then put the dots on the left.

   IT IS A ROW AND NOT ONLY THE DOTS, because the annotated example puts its copy
   button here too, and the two have to sit on ONE axis. Centred by the row, they
   always do; left to two bottom margins and their own heights, the button rode
   five pixels above the dots. */
.code-win .win-right{
  display:flex;align-items:center;gap:4px;
  margin:0 4px 5px auto;
}
.code-win .win-dots{display:flex;align-items:center;gap:7px;margin:0 3px}
.code-win .win-dots i{width:10px;height:10px;border-radius:50%;background:var(--wire)}

/* ---------- the copy button, and where it is NOT ----------

   IT IS IN THE BAR, IN EVERY BLOCK, AND THERE ARE NO RULES FOR IT HERE. That is
   the point of this comment: `portal.css` already draws it, at .55 opacity,
   coming up to full on hover or focus anywhere in the block, and that behaviour
   is right and is left alone.

   A first version of this file floated it over the code, hidden until the
   pointer arrived. Two things were wrong with that, and the copied stylesheet
   had written both down before anybody here typed a line:

     It never hides completely: a control that appears only on hover does
     not exist on a touch screen, and the phone is where copying a snippet
     is most annoying to do by hand.

   Hiding it meant a `@media (hover:none)` exception to undo the hiding on every
   device without a pointer — a rule whose whole job was to cancel the rule
   above it. And in the annotated example the float landed on prose, because
   that block's column alternates code and notes.

   THE OTHER HALF IS THE STUDENT. A course is read block after block, and a
   control that is in the bar here and floating there is two things to learn for
   one action. It is in the bar, it is always there, and the bar is what every
   block in this interface has. */

/* ==========================================================================
   And the annotated example, which is a window around a file cut into pieces.

   THE BLOCK ALREADY TURNS AT 1466px and the frame turns with it. Above that
   width the notes are a column of their own and the program is a second,
   continuous column — so the window is THAT column, and the notes stay outside
   it, in the page, which is what they are: somebody talking beside the file.
   Below it the two columns become one, the file is cut up with prose between
   its pieces, and there is no code column left to frame. The window then holds
   the whole listing, because that is what one column is.

   It is one window either way: the same bar, the same tab, the same dots. What
   changes is what a column means at each width, and the block had already
   decided that.

   THE OUTPUT IS OUTSIDE THE FRAME AT BOTH WIDTHS. It is what the program
   printed, not the program, and a window titled `totals.js` has no business
   around it. That is why the frame is drawn cell by cell rather than on the
   grid: the last cell it closes on is the last snippet of code, and whatever
   the block puts after that is left in the page.
   ========================================================================== */
.example-win .code-bar{
  margin:0;background:var(--ink);
  border:1px solid var(--wire);border-bottom:0;border-radius:5px 5px 0 0;
}
.example-win .example-code{
  border-left:1px solid var(--wire);border-right:1px solid var(--wire);
}
.example-win .example-code:last-of-type{
  border-bottom:1px solid var(--wire);border-radius:0 0 5px 5px;
}
@media(min-width:1466px){
  /* the bar is a cell of the code column, and the frame opens under it */
  .example-win .code-bar{grid-column:2}
}

@media(max-width:1465px){
  .example-win .code-bar{grid-column:1}
  /* The notes are inside the frame here, so they need the padding the code
     cells already have — against a border, text that starts at the edge reads
     as a mistake. */
  .example-win .example-note{
    border-left:1px solid var(--wire);border-right:1px solid var(--wire);
    padding-left:14px;padding-right:14px;
  }
}