/* The dialogs, drawn as sheets of the same paper the machine prints on. */

.backdrop{
  position:fixed;inset:0;background:rgba(8,7,5,.78);
  display:none;align-items:center;justify-content:center;padding:20px;z-index:50;
}
.backdrop.show{display:flex;}
.sheet{
  background:var(--paper);color:var(--ink);
  max-height:84vh;overflow:auto;
  padding:26px 28px;border-radius:2px;
  box-shadow:0 30px 80px rgba(0,0,0,.7);
  background-image:repeating-linear-gradient(0deg, rgba(150,124,72,.05) 0 1px, transparent 1px 7px);
}
#modal{width:min(600px,100%);}
.sheet h2{margin:0 0 14px;font-size:14px;letter-spacing:.14em;font-weight:bold;}
.sheet p{margin:0 0 11px;font-size:13px;line-height:1.85;}
/* Lighter than it was: the manual is now sectioned and numbered, so there is
   far more bold in it, and the old highlight turned whole paragraphs grey. */
.sheet b{background:rgba(28,21,14,.075);padding:1px 4px;}
.sheet .rule{height:1px;background:rgba(28,21,14,.2);margin:16px 0;}

/* Section headings, so the manual can be scanned instead of read. */
.sheet h3{
  margin:22px 0 10px;padding-bottom:5px;
  font-size:11px;letter-spacing:.2em;font-weight:bold;
  border-bottom:1px solid rgba(28,21,14,.22);
}
.sheet h3:first-of-type{margin-top:14px;}

/* The manual's own title, and only that one. The section headings below it
   stay left: they are the left edge the numbered steps and the paragraphs
   line up against, and centring them breaks that column. */
#modal h2{text-align:center;}

/* Numbered steps. The number sits in the margin so the step text lines up
   as a column -- these are things to do in order, not prose. */
.sheet ol{margin:0 0 12px;padding:0;list-style:none;counter-reset:step;}
.sheet ol li{
  position:relative;padding-left:26px;margin-bottom:7px;
  font-size:13px;line-height:1.75;counter-increment:step;
}
.sheet ol li::before{
  content:counter(step);position:absolute;left:2px;top:0;
  font-weight:bold;opacity:.5;
}

/* The footnote about how it really worked: present, but not competing. */
.sheet small{display:block;font-size:11.5px;line-height:1.8;opacity:.7;}

.closebtn{
  background:var(--ink);color:var(--paper);border:none;border-radius:2px;
  padding:9px 18px;margin-top:8px;letter-spacing:.14em;cursor:pointer;
  font-family:inherit;font-size:12px;
}
.closebtn:hover{background:#352A1D;}
.closebtn:disabled{opacity:.3;cursor:not-allowed;}
.closebtn.ghost{background:none;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(28,21,14,.35);}
.closebtn.ghost:hover{background:rgba(28,21,14,.08);}
.sheetbtns{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;}

/* ---- The tape dialogs ---------------------------------------------------
   Same sheet of paper as the help, but everything inside is set in the
   machine's own typeface and uppercase, because everything in them is a
   tape label and a tape label is written on the tape. */

.tapesheet{width:min(430px,100%);font-family:'Courier New',Courier,monospace;}
.tapesheet.wide{width:min(920px,100%);}
.tapesheet h2{letter-spacing:.18em;}
.tapenote{font-size:12px;opacity:.72;margin-bottom:14px;}

/* The label strip is the leader of the tape, and the input is the pencil. */
.labelstrip{
  background:#DCCB9C;
  border:1px solid rgba(28,21,14,.3);
  border-radius:2px;
  padding:9px 11px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.18);
}
.labelstrip input{
  width:100%;border:none;background:none;outline:none;
  font-family:'Courier New',Courier,monospace;
  font-size:17px;letter-spacing:.14em;color:var(--ink);
  text-transform:uppercase;
}
.tapemeta{font-size:11px;opacity:.6;margin-top:8px;letter-spacing:.06em;}

.boxcols{display:flex;gap:22px;align-items:stretch;}
.boxcol{flex:1 1 0;min-width:0;display:flex;flex-direction:column;}
/* The two columns are not the same size because their contents are not: the
   collected tapes carry a name AND a line count AND a note, while your own
   carry a name you wrote and a length. Splitting the width evenly truncates
   one side while the other sits half empty. */
.boxcol.collected{flex:1.6 1 0;}
.boxhead{
  font-size:11px;letter-spacing:.18em;font-weight:bold;
  padding-bottom:6px;margin-bottom:8px;
  border-bottom:1px solid rgba(28,21,14,.28);
}
.boxlist{
  flex:1 1 auto;min-height:150px;max-height:44vh;overflow:auto;
  display:flex;flex-direction:column;gap:3px;
}
.boxempty{font-size:12px;opacity:.5;padding:8px 2px;}

.tapeitem{
  display:flex;align-items:baseline;gap:8px;
  padding:6px 8px;border-radius:2px;cursor:pointer;
  border:1px solid transparent;
}
.tapeitem:hover{background:rgba(28,21,14,.06);}
.tapeitem.on{background:var(--ink);color:var(--paper);}
/* The name never shrinks. It is bounded anyway -- twenty characters for one
   you wrote, and the collected ones are shorter -- and a tape you cannot
   read the name of is not in the box as far as you are concerned. The note
   is what gives way, because it is a description and the name is the thing. */
.tapeitem .nm{
  font-size:13px;letter-spacing:.08em;flex:0 0 auto;white-space:nowrap;
  /* The name is the thing you are picking, so it carries the weight and the
     full ink. The note beside it is a description and stays light -- a row
     where both are equally black reads as one long sentence. */
  font-weight:bold;color:#120D07;
}
.tapeitem.on .nm{color:var(--paper);}
.tapeitem .sep{flex:0 0 auto;opacity:.4;font-size:11px;}
/* Darker than it was, so the line count is actually readable at a glance --
   it is the number people choose on -- but still clearly lighter than the
   name, which stays bold and full ink. The ordering is the whole point:
   name, then count, then description. */
.tapeitem .note{font-size:10.5px;opacity:.68;flex:1 1 auto;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tapeitem.on .note{opacity:.7;}
/* Discarding a tape is throwing paper away, so it is deliberately small and
   deliberately not the thing your hand lands on. */
.tapeitem .x{
  flex:0 0 auto;opacity:.35;font-size:13px;padding:0 2px;
  background:none;border:none;cursor:pointer;color:inherit;font-family:inherit;
}
.tapeitem .x:hover{opacity:1;}

/* The speed choice. The TIME is the big number, not the CPS: how long you
   will be sitting there is the thing being chosen. */
.speedlist{display:flex;flex-direction:column;gap:6px;margin:4px 0 14px;}
.speedopt{
  display:flex;align-items:baseline;gap:12px;
  padding:10px 12px;border-radius:2px;cursor:pointer;
  border:1px solid rgba(28,21,14,.22);
}
.speedopt:hover{background:rgba(28,21,14,.06);}
.speedopt.on{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.speedopt .cps{font-size:12px;letter-spacing:.1em;flex:0 0 84px;}
.speedopt .dur{font-size:16px;letter-spacing:.06em;flex:1 1 auto;}
.speedopt .why{font-size:10.5px;opacity:.55;flex:0 1 auto;text-align:right;}
.speedopt.on .why{opacity:.75;}

/* A source with no tape on it. Offered, but plainly not available -- greying
   it out says "there is nothing there", where hiding it would say "this
   machine cannot do that". */
.speedopt.off{opacity:.35;cursor:not-allowed;}
.speedopt.off:hover{background:none;}

/* Starring a tape. Same weight as the discard cross -- it acts on the row
   without choosing it -- but it stays visible once set, because a star you
   have to hover to find is not a star. */
.tapeitem .star{
  flex:0 0 auto;order:-1;
  background:none;border:none;cursor:pointer;font-family:inherit;
  /* line-height:1 so the bigger glyph does not push the row taller than the
     unstarred ones and make the list jump as you star things. */
  font-size:18px;line-height:1;padding:0 7px 0 0;color:inherit;opacity:.3;
}
.tapeitem .star:hover{opacity:.9;}
/* A star has to be readable at a glance or it is not doing its job. Dark
   enough to hold its own against this cream paper, and gold rather than ink
   so it still reads as a mark somebody added rather than as printing. */
.tapeitem .star.on{opacity:1;color:#7A5206;}
.tapeitem.on .star.on{color:var(--amber);}
/* Where the starred tapes stop. */
.favdiv{height:1px;background:rgba(28,21,14,.22);margin:5px 8px;}