/* Landing page. One font, one size, one grid: every length below is in
   ch (one character wide) or --line (one line tall). */

/* The font, colours and links come from base.css. JS (panel.js) overwrites
   --font-size, --line and --panel-cols once the font is measured. */
:root {
  --panel-cols: 49;
}

html, body {
  height: 100%;
  overflow: hidden;
}

#backdrop {
  position: fixed;
  inset: 0;
  display: block;
}

/* --- Panel --- */

.panel {
  position: absolute;
  width: calc(var(--panel-cols) * 1ch);
  padding: var(--line) 1ch var(--line) 3ch;
  background: var(--bg);
  white-space: nowrap;
  visibility: hidden;          /* shown by JS once it sits on the grid */
}
.panel.ready { visibility: visible; }

.top {
  display: grid;
  grid-template-columns: 15ch 30ch;
}

.face { white-space: pre; }

.fields > div {
  display: grid;
  grid-template-columns: 9ch 21ch;
}
.fields dt { color: var(--dim); }
.fields dd {
  overflow: hidden;
  text-overflow: ellipsis;
}

.links {
  display: flex;
  gap: 6ch;
  margin-top: var(--line);
}

.link-off { color: var(--dim); }

/* Stacked layout for narrow screens: face above the info, links in a column. */
.panel.narrow { padding: var(--line) 2ch; }
.panel.narrow .top { grid-template-columns: 30ch; }
.panel.narrow .info { margin-top: var(--line); }
.panel.narrow .links {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.palette {
  display: flex;
  gap: 1ch;
  margin-top: var(--line);
}