/*
  Enough style to be legible and out of the way. The screen is the page, and the
  shelf that leads to it (spec 0110) is a grid of plain cards on the same
  palette — real design, with screenshots and type worth the name, is phase W6's
  and is not being sketched here.
*/

:root {
  color-scheme: dark;
  --ink: #e8e6e1;
  --dim: #9a978f;
  --edge: #34322e;
  --ground: #16150f;
}

body {
  margin: 0;
  padding: 2rem 1rem 3rem;
  background: var(--ground);
  color: var(--ink);
  font: 15px/1.5 system-ui, -apple-system, "Helvetica Neue", sans-serif;
}

header,
main,
footer {
  max-width: 1120px;
  margin: 0 auto;
}

h1 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

header p,
footer p {
  margin: 0.35rem 0 0;
  color: var(--dim);
}

footer {
  margin-top: 2rem;
}

canvas {
  display: block;
  width: 1120px;
  max-width: 100%;
  /* The CSS box, stated rather than inherited from the width and height
     attributes: on the GPU path those become the *backing store's* size (CSS ×
     devicePixelRatio) and change with the display, and the layout must not
     move when they do. 560 × 384 either way. */
  aspect-ratio: 560 / 384;
  height: auto;
  /* The machine's pixels are not square and are not to be smoothed — on the
     CPU path, where the canvas holds 560 × 384 and the browser is doing the
     scaling. */
  image-rendering: pixelated;
  background: #000;
  border: 1px solid var(--edge);
  margin: 1.5rem auto 0;
}

/* The GPU path renders at the backing store's own size, so there is nothing
   left to scale and nothing to keep sharp: every canvas pixel is a real pixel,
   and `pixelated` here would only fight the browser's own 1:1 blit. */
canvas.gpu {
  image-rendering: auto;
}

/* The Apple IIgs's surface is 640 × 200 and its pixels are twice as tall as
   they are wide — the VGC scans 200 lines where the IIe's 192 became 384 output
   rows. So the CSS box is 640 / 400: the same shape on the glass, holding the
   legacy picture at the size the IIe's canvas holds it and the border the IIgs
   draws around it. Anything squarer would squash a machine that is not square.
   `pixelated` stays, because the browser is doing the scaling here — the
   analog stage that would do it properly is a later spec's. */
canvas.gs {
  aspect-ratio: 640 / 400;
}

.controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.9rem auto 0;
  max-width: 1120px;
}

.controls p {
  margin: 0;
  color: var(--dim);
}

button,
select {
  font: inherit;
  color: var(--ink);
  background: #23211b;
  border: 1px solid var(--edge);
  border-radius: 4px;
  padding: 0.3rem 0.7rem;
}

button:disabled,
select:disabled {
  color: var(--dim);
  opacity: 0.6;
}

label[for="monitor"] {
  color: var(--dim);
}

#roms {
  margin: 2rem auto 0;
  padding: 1.25rem 1.5rem 1.5rem;
  border: 1px solid var(--edge);
  border-radius: 6px;
  max-width: 46rem;
}

#roms h2 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
}

#roms p {
  margin: 0 0 0.9rem;
  color: var(--dim);
}

#roles {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

#roles li {
  padding: 0.2rem 0;
}

#roles li.have::before {
  content: "•  ";
  color: #7fbf7f;
}

#roles li.want::before {
  content: "•  ";
  color: var(--dim);
}

/* A role this page would take and does not need: the second Apple IIgs ROM,
   once either of them is here. Neither green (it is not here) nor the plain
   dot of something still wanted — an open circle, because the row is an offer
   rather than a request. */
#roles li.spare::before {
  content: "◦  ";
  color: var(--dim);
}

#roles li.spare {
  color: var(--dim);
}

#drop {
  border: 1px dashed var(--edge);
  border-radius: 6px;
  padding: 1.25rem;
  text-align: center;
  color: var(--dim);
}

#drop.over {
  border-color: var(--ink);
  color: var(--ink);
}

#drop p {
  margin: 0 0 0.4rem;
}

.file {
  text-decoration: underline;
  cursor: pointer;
}

.file input {
  display: none;
}

.note {
  margin: 0.9rem 0 0;
  color: var(--dim);
  min-height: 1.5em;
}

/* The sound line sits under the controls, on the controls' own grid, and
   reserves its height so that turning sound on does not move the page. */
#sound {
  max-width: 1120px;
  margin: 0.4rem auto 0;
}

/* The video line is a footnote and not a control, so it does not reserve a
   height: on the common path there is nothing to say and nothing to leave a
   gap for. */
#video:empty {
  display: none;
}

footer a {
  color: var(--ink);
}

/* ------------------------------------------------------------- the drives */

#bay {
  margin: 1.5rem auto 0;
  max-width: 1120px;
}

#bay h2 {
  margin: 0 0 0.6rem;
  font-size: 1.05rem;
}

#drives {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Two lines per drive: the row you operate, and the line about what is in it.
   The row keeps the flex layout it has always had; the li is now the column
   that holds both. */
#drives li {
  padding: 0.35rem 0;
}

#drives .row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* "Carrying your changes from yesterday", with Revert and Download beside it.
   Indented to the occupant's column so it reads as belonging to that drive,
   and it reserves no height — on the common path there is nothing to say. */
.carrying {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.25rem 0 0 5.25rem;
  color: var(--dim);
}

/* ...and a hidden one takes nothing. `display: flex` above outranks the
   `hidden` attribute, so without this a hidden line still kept its top margin
   — 4 px on every drive row of every card, measured in spec 0126's review. */
.carrying[hidden] {
  display: none;
}

/* ------------------------------------------------------- the two memories */

#memories {
  margin: 1.2rem auto 0;
  max-width: 1120px;
}

#states {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.9rem;
}

/* The state line sits on the row rather than under it, and does not reserve a
   height there: it says something only just after you have pressed one of the
   two buttons. */
#states .note {
  margin: 0;
  min-height: 0;
}

/* A footnote, not a control: on every browser where the memories work there is
   nothing to say and nothing to leave a gap for. (`#bay-note` and `#saved`
   keep the height they have reserved since spec 0110 — they appear and
   disappear as a person works the drives, and a bay that jumped each time
   would be worse than a blank line.) */
#memory:empty {
  display: none;
}

.drive {
  color: var(--dim);
  min-width: 4.5rem;
}

/* The occupant's name takes the room that is left, so the two buttons line up
   down the column however long a title is. */
.occupant {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#saved a {
  color: var(--ink);
}

/* ------------------------------------------------------------- the shelf */

.cards {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  /* As many as fit, never narrower than a title is comfortable in. */
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 0.9rem;
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  height: 100%;
  box-sizing: border-box;
  padding: 0.9rem 1rem;
  border: 1px solid var(--edge);
  border-radius: 6px;
  background: #1c1a15;
  color: var(--ink);
  text-decoration: none;
}

a.card-body:hover,
a.card-body:focus-visible {
  border-color: var(--ink);
}

/* The picture's frame (spec 0123), which every card has whether or not there is
   a picture in it — a shelf where some disks have pictures and some do not is
   still one grid, and a dark frame reads as a tube switched off rather than as
   a hole. The aspect is the canvas's own: `560 / 384` up there, 35 : 24 here —
   the shape an Apple IIe's glass is, which is what an audit picture of one
   fills exactly. An Apple IIgs's glass is wider (640 / 400) and its picture
   letterboxes inside this frame, which is the honest way to show two machines
   in one grid. */
.card-shot {
  display: block;
  aspect-ratio: 35 / 24;
  background: #000;
  border: 1px solid var(--edge);
  border-radius: 3px;
  overflow: hidden;
}

/* `contain`, so a full-canvas clip from either machine and a picture somebody
   cropped all sit correctly inside the frame rather than being stretched into
   it. The image is offered the frame's own size in both directions; what is
   left over is the frame's black. */
.card-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* A picture that would not load hides itself (`shelf.mjs`), and `hidden` has to
   beat the `display: block` above or the browser's broken-image glyph stays. */
.card-shot img[hidden] {
  display: none;
}

.card-title {
  font-weight: 600;
}

.card-notes {
  color: var(--dim);
  /* Pushes the badge to the bottom of every card, so a row of cards of
     different lengths still has one line of badges across it. */
  flex: 1;
}

.badge {
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--dim);
}

/* A machine this site cannot run yet: the card is still a card, and the badge
   is the whole of the difference. */
.badge.waiting {
  color: #c8a05a;
}