/* Landing page — System 7 desktop with two windows:
   a "Control Panels" hub (top-left) and a "Note Pad" (lower-right),
   laid out to echo the classic Mac OS 7 screenshot. */

.landing-page {
  position: fixed;
  inset: 0;
  overflow: hidden;

  /* Classic Mac arrow (black with a white keyline) replaces the OS pointer.
     cursor is inherited, so this applies across the whole desktop. */
  --sys7-cursor: url("../img/cursor-arrow.svg") 2 2, auto;
  cursor: var(--sys7-cursor);

  background-color: #fff;
  background-image: conic-gradient(#000 90deg, #fff 90deg 180deg, #000 180deg 270deg, #fff 270deg);
  background-repeat: repeat;
  background-size: var(--retro-tile, 4px) var(--retro-tile, 4px);
}

/* --- Shared System 7 window chrome (white frame, hard drop shadow) --- */

.sys7-window {
  position: absolute;
  background: #fff;
  border: 1px solid #000;
  box-shadow: 2px 2px 0 #000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* White title bar with black pinstripes; close box at left, title centered */
.sys7-titlebar {
  position: relative;
  flex-shrink: 0;
  /* Matches the Note Pad header thickness (--np-bar-h) */
  height: 22px;
  border-bottom: 1px solid #000;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.sys7-titlebar::before {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 22px;
  right: 0;
  background-image: repeating-linear-gradient(to bottom, #000 0 1px, #fff 1px 3px);
  z-index: 0;
}

.sys7-close {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 11px;
  height: 11px;
  border: 1px solid #000;
  background: #fff;
  z-index: 1;
}

.sys7-title {
  position: relative;
  z-index: 1;
  background: #fff;
  padding: 0 8px;
  font-family: 'Header-Bold', monospace;
  /* Matches the Note Pad header title size */
  font-size: 14px;
  line-height: 1;
  color: #000;
}

/* --- Control Panels window (top-left hub) --- */

.cp-window {
  /* Primary call-to-action, sat in the general top-left of the desktop and
     kept above the other windows (z-index below). */
  left: clamp(12px, 2vw, 32px);
  top: clamp(34px, 6vh, 70px);
  /* Snug to three 96px icon columns: 28px padding + 3×96 + 2×30 gap + 28px. */
  width: min(92vw, 420px);
  /* Height hugs the single row of icons (title + subbar + one icon row). */
  height: auto;
  z-index: 3;
}

/* Info strip under the title bar, like "15 items   3.8 MB in disk ..." */
.cp-subbar {
  flex-shrink: 0;
  height: 19px;
  border-bottom: 1px solid #000;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 10px;
  font-family: 'Body-Reg', monospace;
  font-size: 12px;
  color: #000;
}

.cp-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 22px 30px;
  padding: 26px 28px;
  overflow: auto;
}

/* Desktop-icon-style button: glyph above a label, hover inverts (System 7 select) */
.cp-icon-btn {
  width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px;
  background: none;
  border: 1px solid transparent;
  cursor: var(--sys7-cursor);
  text-decoration: none;
  color: #000;
  font-family: 'Header-Reg', monospace;
  font-size: 13px;
  text-align: center;
}

.cp-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
}

.cp-icon svg,
.cp-icon img {
  width: 58px;
  height: 58px;
  display: block;
  object-fit: contain;
}

/* Icons are 1-bit pixel art; keep the staircase edges crisp when scaled */
.cp-icon img {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

.cp-label {
  padding: 1px 4px;
  line-height: 1.2;
  white-space: nowrap;
}

.cp-icon-btn:hover .cp-icon,
.cp-icon-btn:focus-visible .cp-icon {
  background: #000;
}

.cp-icon-btn:hover svg,
.cp-icon-btn:focus-visible svg,
.cp-icon-btn:hover img,
.cp-icon-btn:focus-visible img {
  filter: invert(1);
}

.cp-icon-btn:hover .cp-label,
.cp-icon-btn:focus-visible .cp-label {
  background: #000;
  color: #fff;
}

.cp-icon-btn:focus-visible {
  outline: none;
}

/* --- Note Pad window (lower-right) --- */

.np-window {
  /* Flavour, not action: tucked into the bottom-right corner so it frames the
     centred Control Panel rather than competing with it for the middle. */
  left: auto;
  right: clamp(16px, 3vw, 48px);
  top: auto;
  bottom: 0;   /* aligned flush with the bottom of the page */
  /* ~1/3 smaller than the original (width x2/3: 360->240). Height is fixed to
     comfortably clear the poem text (~254px + chrome) so the textarea scroll
     bar never appears; 90vh only clamps it on extremely short screens. */
  width: min(23vw, 240px);
  height: min(350px, 90vh);
  z-index: 2;
}

/* Each canvas pixel is one logical checker cell. JavaScript sizes and positions
   the board in the same snapped cell units as the page background, so its
   unchanged cells disappear seamlessly into the desktop. */
.landing-logo-board {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  max-width: none;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  pointer-events: none;   /* transparent to the cursor, like the background */
  user-select: none;
  z-index: 0;             /* below the windows */
  contain: strict;
}

/* Active-window title bar: white with fine horizontal racing stripes and
   dimensional close / zoom boxes (matches the classic Note Pad). */
.np-header {
  /* Single knob for the bar height; the borderless cap slices are 76x59. */
  --np-bar-h: 22px;
  position: relative;
  flex-shrink: 0;
  height: var(--np-bar-h);
  /* The window frame draws the top/left/right edges; this divides the bar
     from the page below (the slices no longer carry their own borders). */
  border-bottom: 1px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Left/right caps painted over a repeating striped filler (top layer first) */
  background-color: #fff;
  background-image:
    url('../img/title_bar/titlebar-left.png'),
    url('../img/title_bar/titlebar-right.png'),
    url('../img/title_bar/titlebar-midfiller.png');
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-position: left center, right center, left center;
  background-size: auto 100%, auto 100%, auto 100%;
}

/* Transparent click target over the close box baked into the left cap.
   Offsets are expressed as fractions of the bar height so they track the
   cap art at any --np-bar-h. */
.np-header .header-btn-close {
  position: absolute;
  /* Cover the baked close box (x27-59, y10-43 of the 76x59 slice) plus a ~2px
     margin so the click target is comfortable rather than pixel-tight.
     Denominator is the slice height (59); offsets track --np-bar-h. */
  top: calc(var(--np-bar-h) * 8 / 59);
  left: calc(var(--np-bar-h) * 25 / 59);
  width: calc(var(--np-bar-h) * 36 / 59);
  height: calc(var(--np-bar-h) * 37 / 59);
  background: transparent;
  border: 0;
  outline: none;
  box-shadow: none;
  z-index: 2;
}

/* Blank slice (white centre, black top/bottom rules) masks the stripes behind
   the title; align-self: stretch makes its rules line up with the caps'. */
.np-header-title {
  position: relative;
  z-index: 1;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 0 8px;
  background-image: url('../img/title_bar/titlebar-midblank.png');
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 100%;
  font-family: 'Header-Bold', monospace;
  font-size: 14px;
  color: #000;
}

.np-body {
  flex: 1;
  min-height: 0;
  padding: 18px 22px 8px;
  overflow: hidden;
  display: flex;
}

/* Editable Note Pad page — borderless textarea that fills the body and carries
   the System-7 font/size/spacing of the classic Note Pad */
.np-edit {
  flex: 1;
  min-height: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  resize: none;
  overflow: auto;
  color: #000;
  /* Classic Mac screen-serif look via 'Alto-Serif', a bitmap serif. It's a
     pixel font, so it must stay crisp — keep the global 'font-smooth: never'
     (no antialiasing) like the rest of the chrome. The font's native grid is
     14px/em, so it renders pixel-exact at 14px (1:1) or any multiple (28px,
     42px); off-grid sizes blur, which is why this is fixed rather than fluid. */
  font-family: 'Alto-Serif', 'Times New Roman', serif;
  -webkit-font-smoothing: none;
  font-size: 14px;
  line-height: 1.5;
  cursor: text;
}

/* Footer: centered page number with the classic dog-eared page corner */
.np-footer {
  position: relative;
  flex-shrink: 0;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Body-Reg', monospace;
  font-size: 12px;
  color: #000;
}

/* Turned-up page corner at the top-left (white box with a fold crease, pixelated) */
/* Pixelated dog-eared page corner, anchored to the bottom-left of the page */
.np-corner {
  position: absolute;
  left: 0;
  /* Nudged down 1px so the fold sits right on the page line. */
  bottom: -1px;
  width: 40px;
  height: 40px;
  line-height: 0;
  z-index: 1;
}

.np-corner svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Stacked sheets beneath the page: full-width black lines, evenly spaced */
.np-stack {
  flex-shrink: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.np-sheet {
  height: 2px;
  border-top: 1px solid #000;
}

/* Top line is the current page's own bottom edge: it stops at the fold so it
   runs into the crease (that page is the one being folded), while the sheets
   beneath it keep full-width edges (the pages underneath). */
.np-sheet:first-child {
  margin-left: 40px;
}

/* --- Dynamic window behavior (drag / stacking / close) --- */

/* Title bars act as drag handles, but keep the regular arrow cursor
   (no move/grab cursor) everywhere. */
.sys7-titlebar[data-drag-handle],
.np-header[data-drag-handle] {
  cursor: var(--sys7-cursor);
  touch-action: none;
}

/* Close / zoom boxes are clickable controls, not drag surfaces */
.sys7-close[data-close],
.np-header .header-btn-close[data-close] {
  cursor: var(--sys7-cursor);
}

/* Closed windows are removed from the desktop until re-opened via their icon */
.sys7-window.is-hidden {
  display: none;
}

/* Both windows always render in their active state (full title-bar stripes);
   clicking a window only re-stacks it (see landing.js), so the title-bar
   styling never changes between front/back. */

/* --- Desktop icons (one per window, top-right of the desktop) --- */

.desktop-icons {
  position: absolute;
  top: clamp(34px, 6vh, 70px);
  right: clamp(12px, 1.5vw, 28px);
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.desktop-icon {
  width: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px;
  background: none;
  border: 1px solid transparent;
  cursor: var(--sys7-cursor);
  color: #000;
  font-family: 'Header-Reg', monospace;
  font-size: 12px;
  text-align: center;
}

.desktop-icon-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
}

.desktop-icon-img svg,
.desktop-icon-img img {
  width: 58px;
  height: 58px;
  display: block;
  object-fit: contain;
}

/* Icons are 1-bit pixel art; keep the staircase edges crisp when scaled */
.desktop-icon-img img {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

.desktop-icon-label {
  line-height: 1.3;
  white-space: nowrap;
}

/* White highlight hugs the text like a Word selection, cloned per wrapped line */
.desktop-icon-label span {
  background: #fff;
  padding: 0 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Hover/focus inverts the glyph and highlights the label, like a selected icon */
.desktop-icon:hover .desktop-icon-img,
.desktop-icon:focus-visible .desktop-icon-img {
  background: #000;
}

.desktop-icon:hover svg,
.desktop-icon:focus-visible svg,
.desktop-icon:hover img,
.desktop-icon:focus-visible img {
  filter: invert(1);
}

.desktop-icon:hover .desktop-icon-label span,
.desktop-icon:focus-visible .desktop-icon-label span {
  background: #000;
  color: #fff;
}

.desktop-icon:focus-visible {
  outline: none;
}