/*
  The firmware splash and the Limine menu.

  Limine is firmware, not Breeze, so its palette lives here rather than in
  tokens.css (build contract, shared rules): the near-flat navy CachyOS ships,
  violet haze in the top-left corner, Catppuccin Mocha text, the VGA greens of
  the key hints (spec, appendix A).

  Limine draws with an 8x16 bitmap font. VT323 is the nearest thing on Google
  Fonts — a DEC terminal face with the same tall, narrow cell — and it is set at
  a size where the cell comes out close to 8x16 doubled-ish for a browser at
  arm's length. Smoothing is turned off where the browser allows it, because a
  bitmap font that has been antialiased reads as a webfont.
*/

/*
  VT323, the one face the firmware screen, Limine and the firmware setup draw
  in (the setup opens from Limine, so it is in the page by then). It lives here
  and not in fonts/boot.css, which every page reads: a page that never shows
  one of those screens never reads about the face. Latin and Latin Extended only,
  fetched by the first glyph that needs each (unicode-range). Licence: ../fonts/OFL-VT323.txt.
*/

/* latin-ext */
@font-face {
  font-family: 'VT323';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/vt323-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'VT323';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/vt323-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.limine {
  --lim-bg: #0f172b;
  --lim-haze: #39335a;
  --lim-haze-hi: #4a3a5e;
  --lim-text: #cdd6f4;
  --lim-base: #1e1e2e;
  --lim-hint: #00aa00;
  --lim-hint-hi: #55ff55;
  --lim-font: "VT323", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  --lim-size: 22px;
  --lim-line: 1.05;
  --lim-curtain: 380ms;

  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  background: #000;
  color: var(--lim-text);
  font-family: var(--lim-font);
  font-size: var(--lim-size);
  line-height: var(--lim-line);
  -webkit-font-smoothing: none;
  font-smooth: never;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  cursor: default;
}

.limine p,
.limine ul {
  margin: 0;
  padding: 0;
}

/*
  Phases are one attribute on the root. "done" is the black frame a real
  machine shows between the bootloader letting go and the kernel drawing.
*/
.limine-fw,
.limine-menu {
  position: absolute;
  inset: 0;
}
.limine:not([data-phase="firmware"]) .limine-fw,
.limine[data-phase="firmware"] .limine-menu,
.limine[data-phase="done"] .limine-menu {
  display: none;
}

/* --- firmware ------------------------------------------------------------ */

.limine-fw {
  display: grid;
  place-items: center;
  background: #000;
}

/*
  The icon is a white wolf on a near-black rounded square. Pushing contrast
  takes the square down to true black, so on the black screen only the wolf is
  left — an OEM logo, not an app icon.
*/
.limine-fw__logo {
  width: min(34vmin, 240px);
  height: auto;
  filter: contrast(1.5);
  image-rendering: auto;
  pointer-events: none;
}

/*
  The firmware's own lines, drawn one a step as a POST screen prints them. The
  whole stage lasts well under half a second, so this is texture more than
  text; the colour is the hint's, a shade darker.
*/
.limine-fw__post {
  position: absolute;
  top: max(4vh, 20px);
  left: max(3vw, 16px);
  right: 16px;
  color: #7a7a7a;
  font-size: calc(var(--lim-size) * 0.86);
  line-height: 1.5;
}

.limine-fw__line {
  margin: 0;
  white-space: pre-wrap;
  animation: limine-post 0s linear calc(var(--i, 0) * 70ms) both;
}

@keyframes limine-post {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.limine-fw__hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(9vh, 40px);
  padding: 0 16px;
  text-align: center;
  color: #a8a8a8;
  font-size: calc(var(--lim-size) * 0.86);
}

/* --- menu ---------------------------------------------------------------- */

.limine-menu {
  background: #000;
}

/*
  Limine's wallpaper is a flat navy with a soft violet bloom top-left. It is
  revealed as a firmware framebuffer paints it, a band at a time from the top —
  steps() rather than a smooth wipe, so it reads as drawing, not as a CSS
  transition.
*/
.limine__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(42% 46% at 6% 4%, var(--lim-haze-hi) 0%, rgb(74 58 94 / 0) 100%),
    radial-gradient(70% 62% at 18% 0%, var(--lim-haze) 0%, rgb(57 51 90 / 0.55) 30%, rgb(57 51 90 / 0) 100%),
    radial-gradient(34% 40% at 46% 2%, rgb(57 51 90 / 0.5) 0%, rgb(57 51 90 / 0) 100%),
    var(--lim-bg);
  animation: limine-curtain var(--lim-curtain) steps(16, end) both;
}

@keyframes limine-curtain {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* The text is drawn after the picture, all at once, as Limine does. */
.limine__screen {
  position: relative;
  box-sizing: border-box;
  width: min(100% - 32px, 54ch);
  margin: 0 auto;
  padding-top: max(14vh, 48px);
  white-space: pre;
  animation: limine-text 0s linear var(--lim-curtain) both;
}

/* Opacity, not visibility: the editor's field must take focus mid-reveal. */
@keyframes limine-text {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.limine__hints {
  display: flex;
  flex-wrap: wrap;
  column-gap: 4ch;
  margin-bottom: 2lh !important;
  color: var(--lim-hint);
}

.limine__hint {
  all: unset;
  white-space: pre;
}
button.limine__hint {
  cursor: pointer;
}
button.limine__hint:focus-visible {
  outline: 1px dashed var(--lim-hint-hi);
  outline-offset: 2px;
}

.limine__hotkey {
  font-weight: normal;
  color: var(--lim-hint-hi);
}

.limine__list {
  list-style: none;
}

.limine__row {
  display: flex;
  cursor: pointer;
}
.limine__row--empty {
  cursor: default;
  opacity: 0.6;
}

.limine__tree {
  display: flex;
  flex: none;
  align-self: stretch;
}

/* One character cell; the strokes are 2px, the weight of the font's own. */
.limine__cell {
  position: relative;
  display: flex;
  align-items: center;
  width: 1ch;
  flex: none;
}
.limine__cell--tee::before,
.limine__cell--elbow::before,
.limine__cell--tee::after,
.limine__cell--elbow::after,
.limine__cell--dash::after {
  content: "";
  position: absolute;
  background: currentColor;
}
.limine__cell--tee::before,
.limine__cell--elbow::before {
  left: calc(50% - 1px);
  width: 2px;
  top: 0;
  bottom: 0;
}
.limine__cell--elbow::before {
  bottom: calc(50% - 1px);
}
.limine__cell--tee::after,
.limine__cell--elbow::after,
.limine__cell--dash::after {
  top: calc(50% - 1px);
  height: 2px;
  left: calc(50% - 1px);
  right: 0;
}
.limine__cell--dash::after {
  left: 0;
}

/*
  Limine marks the selected entry by swapping foreground and background on its
  name only — the tree stays as it was.
*/
.limine__label {
  overflow: hidden;
  text-overflow: ellipsis;
}
.limine__row[aria-selected="true"] .limine__label {
  background: var(--lim-text);
  color: var(--lim-base);
}

.limine__comment {
  margin-top: 1lh !important;
  min-height: 1lh;
}

.limine__countdown {
  margin-top: 1lh !important;
  min-height: 1lh;
}

/* --- editor -------------------------------------------------------------- */

.limine__editor[hidden] {
  display: none;
}

/*
  The entry's config in a frame titled with its name, as Limine's editor shows
  it. Only cmdline: is editable here; the rest is there to make it obvious
  what is being edited. A fieldset, because its legend cuts the frame by
  itself and nothing has to be painted behind the title to clash with the haze.
*/
.limine__editor {
  min-width: 0;
  margin: 0.5lh 0 0;
  padding: 0.4lh 1ch 0.6lh;
  border: 2px solid var(--lim-text);
}

.limine__edtitle {
  margin-left: 1ch;
  padding: 0 1ch;
}

.limine__edline {
  display: flex;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.limine__key {
  flex: none;
}

.limine__input {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--lim-text);
  caret-color: var(--lim-hint-hi);
  font: inherit;
  line-height: inherit;
  resize: none;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: none;
}

/* --- sizes --------------------------------------------------------------- */

/*
  Phones: slightly smaller type so the longest line still fits 375px.
*/
@media (max-width: 520px) {
  .limine {
    --lim-size: 20px;
  }
  .limine__screen {
    padding-top: max(10vh, 40px);
  }
  .limine__hints {
    column-gap: 2ch;
    row-gap: 0.4lh;
  }
}

/*
  Height rather than padding, so the tree cells stretch with the row and the
  strokes still meet the row above.
*/
@media (pointer: coarse) {
  .limine__row {
    min-height: 1.7lh;
  }
  .limine__label {
    align-self: center;
  }
}

/* Limine doubles its font on 2560x1440 and up. */
@media (min-width: 2560px) and (min-height: 1440px) {
  .limine {
    --lim-size: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .limine__bg,
  .limine__screen {
    animation: none;
  }
}
:root[data-anim="off"] .limine__bg,
:root[data-anim="off"] .limine__screen {
  animation: none;
}

/* --- the bootloader that cannot find its disk ----------------------------- */

.limine__row--error {
  cursor: default;
  color: #ff5555;
}

/*
  The longest error line is 63 cells, and the menu column is 54. At that width
  the last glyph of `…boot():/limine.conf` was cut off by the screen's own edge.
  The error page gets the room, and on a phone, where no width is enough, a line
  wraps rather than runs off.
*/
.limine[data-phase="error"] .limine__screen {
  width: min(100% - 32px, 72ch);
}
.limine[data-phase="error"] .limine__row--error {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}