/* Courier Prime, self-hosted (SIL OFL, see app/assets/fonts/OFL.txt).
   Full character set, so no unicode-range splitting is needed. */
@font-face{
  font-family:'Courier Prime';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/assets/CourierPrime-Regular-d987c46f.woff2") format('woff2');
}
@font-face{
  font-family:'Courier Prime';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("/assets/CourierPrime-Bold-3274248a.woff2") format('woff2');
}

:root{
  --paper:#F1F0EC;
  --white:#FFFFFF;
  --ink:#14110F;
  --red:#E4231A;
  --rule:#C4C2BA;
  --dim:#85837B;
  --ghost:#DAD8D0;
  --mono:'Courier Prime','Courier New',ui-monospace,monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--mono);
  font-size:15px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}

.shell{max-width:660px;margin:0 auto;padding:0 18px 90px}

/* uppercase micro labels - the load-bearing typographic element */
.micro{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.micro b{font-weight:400;color:var(--ink)}
.micro .hot{color:var(--red)}

.head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:20px 0 10px;border-bottom:1px solid var(--ink);
}
.wordmark{font-size:19px;font-weight:700;letter-spacing:.02em}
.wordmark span{color:var(--red)}

/* presence list - fixed outside the document flow, so a change in the
   number of people never shifts the content */
.sidebar{
  display:none;
  position:fixed;
  top:22px;
  left:calc(50% + 348px);
  width:150px;
  z-index:5;
}
.sidebar-head{padding-bottom:6px;border-bottom:1px solid var(--rule)}
.presence-list{
  margin-top:7px;
  display:flex;flex-direction:column;gap:4px;
  max-height:calc(100vh - 130px);
  overflow-y:auto;
}
.who{display:flex;align-items:center;gap:6px;font-size:12px;line-height:1}
.who canvas{width:14px;height:14px;image-rendering:pixelated;display:block;flex:0 0 auto}
.who span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who.me{color:var(--red)}

/* on narrow displays it moves into the status bar, which is fixed as well */
.presence-mini{display:flex;align-items:center;gap:5px;height:14px;overflow:hidden}
.presence-mini canvas{width:14px;height:14px;image-rendering:pixelated;display:block;flex:0 0 auto}

@media (min-width:1040px){
  .sidebar{display:block}
  .presence-mini{display:none}
}

/* task ticket */
.ticket{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  flex-wrap:wrap;padding:9px 0;border-bottom:1px solid var(--rule);
}
.serial{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.clock{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.clock b{font-size:15px;letter-spacing:0;color:var(--ink)}
.clock.low b{color:var(--red)}

.prompt{padding:26px 0 20px}
.prompt h1{margin:0;font-size:26px;font-weight:700;line-height:1.2;letter-spacing:-.01em}
.prompt p{margin:8px 0 0;color:var(--dim);font-size:14px}

/* canvas - two layers, the lower one for the phase 2 underlay */
.plate{position:relative;border:1px solid var(--ink);background:var(--white);line-height:0}
.plate canvas{
  display:block;width:100%;height:auto;
  image-rendering:pixelated;image-rendering:crisp-edges;
}
.plate .layer-bg{position:absolute;inset:0;z-index:0}
.plate .layer-draw{
  position:relative;z-index:1;
  cursor:crosshair;touch-action:none;
  user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.plate-meta{display:flex;justify-content:space-between;gap:12px;padding-top:6px}

/* tools */
.tools{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  margin-top:16px;padding-bottom:16px;border-bottom:1px solid var(--rule);
}
.group{display:flex;align-items:center;gap:7px}

.swatch{
  width:26px;height:26px;padding:0;position:relative;
  border:1px solid var(--ink);background:var(--white);cursor:pointer;
}
.swatch i{position:absolute;inset:4px;display:block}
.swatch[data-c="black"] i{background:var(--ink)}
.swatch[data-c="red"] i{background:var(--red)}
.swatch[data-c="erase"] i{background:var(--white);border:1px solid var(--rule)}
.swatch[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:2px}

.nib{
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  padding:0;border:1px solid var(--ink);background:var(--white);cursor:pointer;
}
.nib i{background:var(--ink);display:block}
.nib[data-s="1"] i{width:3px;height:3px}
.nib[data-s="2"] i{width:6px;height:6px}
.nib[data-s="3"] i{width:10px;height:10px}
.nib[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:2px}

.txtbtn{
  border:0;background:none;padding:0;font:inherit;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);cursor:pointer;border-bottom:1px solid var(--rule);
}
.txtbtn:hover{color:var(--ink);border-bottom-color:var(--ink)}

.spacer{flex:1 1 auto}

.send{
  border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  font:inherit;font-weight:700;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;
  padding:9px 20px;cursor:pointer;
}
.send:hover{background:var(--red);border-color:var(--red)}

/* text field (name, guessing in the pot game) */
.field input{
  width:100%;font:inherit;font-size:17px;
  border:0;border-bottom:1px solid var(--ink);
  background:none;color:var(--ink);padding:8px 0;
}
.field input::placeholder{color:var(--ghost)}
.field .err{color:var(--red);font-size:12px;margin-top:8px;min-height:1em}

.actions{display:flex;justify-content:flex-end;margin-top:22px}

/* main button on the crossroads screen */
.hero{
  width:100%;margin:22px 0 4px;
  border:1px solid var(--ink);background:var(--white);color:var(--ink);
  font:inherit;font-weight:700;font-size:20px;
  letter-spacing:.06em;text-transform:uppercase;
  padding:26px 20px;cursor:pointer;
}
.hero:hover{background:var(--ink);color:var(--paper)}
.hero small{
  display:block;margin-top:7px;font-size:10px;font-weight:400;
  letter-spacing:.16em;color:var(--dim);
}
.hero:hover small{color:var(--ghost)}

/* game list */
.queue{margin-top:30px}
.queue > .micro{display:block;padding-bottom:7px;border-bottom:1px solid var(--ink)}
.job{
  display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:14px;
  width:100%;border:0;border-bottom:1px solid var(--rule);background:none;
  font:inherit;text-align:left;padding:13px 0;cursor:pointer;color:var(--ink);
}
.job:hover .job-name{color:var(--red)}
.job-name{font-size:16px}
.job-name em{
  display:block;font-style:normal;font-size:13px;
  color:var(--dim);margin-top:2px;letter-spacing:0;text-transform:none;
}
.job-tag{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.job:hover .job-tag{color:var(--red)}

/* status bar */
.status{position:fixed;left:0;right:0;bottom:0;background:var(--paper);border-top:1px solid var(--ink)}
.status-in{
  max-width:660px;margin:0 auto;padding:9px 18px;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
}

:focus-visible{outline:2px solid var(--red);outline-offset:2px}

@media (max-width:520px){
  .prompt h1{font-size:21px}
  .tools{gap:14px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}

img.pixel{
  display:block;width:100%;height:auto;
  image-rendering:pixelated;image-rendering:crisp-edges;
}

.tools form{margin:0}

.send-reject{
  border:1px solid var(--ink);background:var(--white);color:var(--ink);
  font:inherit;font-weight:700;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;
  padding:9px 20px;cursor:pointer;
}
.send-reject:hover{background:var(--red);border-color:var(--red);color:var(--paper)}

.gallery{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
  margin-top:22px;
}
.tile{border:1px solid var(--ink);background:var(--white);min-width:0}
.tile-meta{padding:6px 8px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (min-width:520px){
  .gallery{grid-template-columns:repeat(3, 1fr)}
}