/* Blog page: a central screen with a margin on each side for widgets.
   Fonts, colours and links come from base.css. Lengths are in ch (one
   character) and var(--line) (one line), so everything sits on the grid. */

:root {
  --screen-cols: 80ch;
  --margin-cols: 28ch;
  --gap: 3ch;
}

body {
  min-height: 100vh;
  padding: var(--line) 2ch;
}

/* --- Layout --- */

/* Three columns: margin, screen, margin. In the HTML the screen comes first;
   grid-template-areas puts each part in its place. */
.page {
  display: grid;
  grid-template-columns: var(--margin-cols) minmax(0, var(--screen-cols)) var(--margin-cols);
  grid-template-areas:
    "header header header"
    "left   screen right";
  justify-content: center;
  align-items: start;
  column-gap: var(--gap);
  row-gap: calc(var(--line) * 2);
}
.header { grid-area: header; }
.screen-frame { grid-area: screen; }
.margin-left { grid-area: left; }
.margin-right { grid-area: right; }

.margin:empty { display: none; }

/* Widgets stacked in each margin, with room between frames for the titles
   that stick up out of their top edges. */
.margin {
  display: grid;
  row-gap: calc(var(--line) * 2);
}
/* Grid and flex items grow to fit their content unless told otherwise; a
   long unbroken word would then push a widget out of its column. */
.margin,
.widget {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Not enough room for all three (28 + 80 + 28 columns plus gaps, about
   1240px): one column, the screen first and the widgets after it. */
@media (max-width: 1240px) {
  .page {
    grid-template-columns: minmax(0, var(--screen-cols));
    grid-template-areas:
      "header"
      "screen"
      "left"
      "right";
  }
  /* The widgets wrap side by side under the screen instead of in one tall
     column. */
  .margin {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--line) * 2) var(--gap);
  }
  .widget { flex: 1 1 var(--margin-cols); }
}

.header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 2ch;
}

/* --- Frames ---
   A 1px border with a title sitting on its top edge, like
   ┌─ tty1 ──────┐. The title is lifted by half a line so the border
   runs through the middle of its text, where a ─ would be. */

.frame {
  position: relative;
  border: 1px solid var(--dim);
  padding: var(--line) 2ch;
}
.frame-title {
  position: absolute;
  top: calc(var(--line) / -2);
  left: 1ch;
  padding: 0 1ch;
  background: var(--bg);
  color: var(--dim);
}

/* Widgets are narrower, so they keep less padding at the sides: about 25
   characters fit inside. */
.widget { padding: var(--line) 1ch; }

/* --- The screen --- */

.screen:focus { outline: none; }

.blank { height: var(--line); }

.prompt-user { color: var(--accent); }
.prompt-path { color: var(--accent-dim); }

.error { color: var(--error); }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2ch;
}

/* The cursor after the last prompt blinks, unless the visitor asked their
   system for less motion. steps(1) switches on and off with no fade. */
.cursor { animation: blink 1.2s steps(1) infinite; }
@keyframes blink {
  50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
}

/* tree and ls output keep their spaces, so the columns line up. */
.tree p,
.ls .row { white-space: pre; }

/* Each ls line is one link, highlighted across the whole line. A name too
   long for the line ends in … instead of overflowing. */
.ls .row {
  display: flex;
}
.ls .name {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* A line with buttons after it (the admin page): the link takes the room. */
.ls .line { display: flex; }
.ls .line .row { flex: 1; min-width: 0; }
.ls .draft { color: var(--dim); }
.ls .row:hover,
.ls .row:focus-visible { color: var(--bg); }

/* Phones: drop the permissions and owner columns to leave room for names,
   and let a long name wrap (at a "/" if it can) under its own column
   instead of being cut short. */
@media (max-width: 600px) {
  .ls .perms,
  .ls .owner { display: none; }
  .ls .name {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* --- A post --- */

.post-image {
  display: block;
  max-width: 100%;
  max-height: 80vh;       /* a tall portrait photo still fits on screen */
  height: auto;
  margin-bottom: var(--line);
}

.post-body p + p { margin-top: var(--line); }
.post { overflow-wrap: anywhere; }           /* long links and words wrap instead of overflowing */
.post-body a { color: var(--accent); }
.post-body a:hover,
.post-body a:focus-visible { color: var(--bg); }

/* --- Widgets --- */

.face {
  white-space: pre;
  text-align: center;
}
.sonetchi-line { text-align: center; }

/* Two columns: key, then value (currently, space weather). */
.pairs {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 1ch;
}
.pairs dt { color: var(--dim); }
.pairs dd { overflow-wrap: anywhere; }
.pairs.dim dd { color: var(--dim); }

/* The Kp bar: filled part in the accent colour, the rest dim. */
.bar { color: var(--dim); }
.bar-on { color: var(--accent); }
.pairs.dim .bar-on { color: var(--dim); }

.moon-art {
  font: inherit;
  text-align: center;
  color: var(--dim);
}
.moon-art .lit { color: var(--accent); }

/* --- Phones --- */

/* A little less padding around the page and inside frames: every
   character of width counts on a 390px screen. */
@media (max-width: 600px) {
  body { padding: var(--line) 1ch; }
  .frame { padding: var(--line) 1ch; }
}