/* BunchOS v2 additions. Loaded after the Webflow stylesheet; reuses its tokens (--off-black, --lila, ...). */

/* ---------- bunch.svg ---------- */
.window.is-home-token .window_content { background-color: var(--white-green); }
.window.is-home-token .home_bunch-image { aspect-ratio: 1 / 1; display: block; }
.gallery_portrait[src$=".svg"] { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }

/* ---------- profile.json (was wallet.dat) ---------- */
.window_content.is-profile-json {
  background-color: var(--off-white);
  justify-content: flex-start;
  align-items: stretch;
  padding: .75rem .875rem;
  min-height: auto;
}
.bunch-json {
  margin: 0;
  font-family: JetBrains Mono, monospace;
  font-size: 11px;
  line-height: 1.55;
  color: var(--off-black);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: none;
  border: 0;
  padding: 0;
}
.bunch-json_key { color: var(--off-black); }
.bunch-json_str { color: var(--green); }
@media screen and (min-width: 992px) {
  /* a little wider than the old 175px tile, growing to the right (away from Reminders) */
  .window.is-home-btc { width: 215px; }
}
@media screen and (min-width: 1920px) {
  /* here it sits left of the To-do's, so the extra 40px goes left instead */
  .window.is-home-btc { margin-left: -615px; }
}
@media screen and (max-width: 991px) {
  .window.is-home-btc { width: 200px; }
  .bunch-json { font-size: 10px; }
}

/* ---------- home: the 4th peeking character only exists in the desktop composition (bunchos.js) ---------- */
/* default size before bunchos.js composes it; must sit inside .main or Draggable's bounds shove it */
.window.is-hidden-4 { z-index: 5; width: 150px; margin-top: 40px; margin-left: -460px; }
@media screen and (max-width: 991px) {
  .window.is-hidden-4 { display: none; }
}

/* ---------- home: a ~70% miniature of every window's chrome and contents (desktop only) ----------
   bunchos.js sizes and places the windows (.home gets .is-contained on 992px+); this scales what's
   inside them with real sizes (no transform, so drag/close/hit-testing are untouched). Body text
   bottoms out at 10px. Dock + menu bar aren't inside .home, so they keep their size. */
.is-contained { --home-k: .7; }
.is-contained > .window { border-radius: calc(8px * var(--home-k)); }
.is-contained > .window > .window_top-bar { padding: calc(8px * var(--home-k)) calc(16px * var(--home-k)); gap: calc(24px * var(--home-k)); }
.is-contained > .window .window_top-bar_title { font-size: max(10px, calc(14px * var(--home-k))); line-height: 1.3; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.is-contained > .window .window_close-button { width: max(10px, calc(16px * var(--home-k))); height: max(10px, calc(16px * var(--home-k))); }
.is-contained .window_content.is-home-request { padding: calc(24px * var(--home-k)); gap: calc(16px * var(--home-k)); font-size: max(10px, calc(16px * var(--home-k))); line-height: 1.4; }
.is-contained .home-request-button { font-size: max(10px, calc(14px * var(--home-k))); padding: calc(10px * var(--home-k)) calc(16px * var(--home-k)); letter-spacing: calc(2px * var(--home-k)); }
.is-contained .window_content.is-the-bunch-logo .window_content-holder { padding: calc(40px * var(--home-k)) calc(32px * var(--home-k)); }
.is-contained > .window[hidden-bunch] .window_content { min-height: 0; aspect-ratio: 1 / 1; } /* Webflow's 100px min-height would make a tucked one too tall */
.is-contained .window_content.is-profile-json { padding: calc(12px * var(--home-k)) calc(14px * var(--home-k)); }
.is-contained .bunch-json { font-size: max(10px, calc(11px * var(--home-k))); }
.is-contained .window_content.is-to-dos { padding: calc(16px * var(--home-k)); }
.is-contained .home-to-do_row { padding: calc(16px * var(--home-k)) calc(8px * var(--home-k)); gap: calc(12px * var(--home-k)); font-size: max(10px, calc(14px * var(--home-k))); }
.is-contained .home-to-do_checkbox { width: max(10px, calc(16px * var(--home-k))); height: max(10px, calc(16px * var(--home-k))); }
.is-contained .home-to-do_text { font-size: max(10px, calc(14px * var(--home-k))); }

/* ---------- dock tiles ---------- */
.menu_item.is-maker { color: #c186ff; } /* the to-do checkbox purple; plain lila disappears on the default wallpaper */
.menu_item.is-terminal { color: var(--off-white); }
.menu_item-icon.is-maker { color: var(--off-white); }
.menu_item-icon.is-terminal { color: var(--off-black); }
.menu_item-icon.is-maker { width: 28px; height: 28px; }
.menu_item-icon.is-terminal { width: 30px; height: 30px; }
.menu_indicator.is-app-indicator { width: 4px; }
@media screen and (max-width: 991px) {
  .menu_item-icon.is-maker { width: 26px; height: 26px; }
  .menu_item-icon.is-terminal { width: 28px; height: 28px; }
}
@media screen and (max-width: 479px) {
  /* 8 tiles instead of 7: tighten the dock so it still fits a 375-390px phone */
  .menu { grid-column-gap: .375rem; grid-row-gap: .375rem; padding-left: .625rem; padding-right: .625rem; }
  .menu_item { width: 38px; height: 38px; }
  .menu_item-icon.is-maker { width: 18px; height: 18px; }
  .menu_item-icon.is-terminal { width: 20px; height: 20px; }
}

/* ---------- Maker.app ---------- */
.window.is-maker {
  z-index: 1000;
  top: 52px;
  left: 10vw;
  width: 80vw;
  height: min(80vh, calc(100dvh - 170px));
  min-height: 420px;
}
/* the app itself: bunchos-maker.css */
@media screen and (max-width: 767px) {
  .window.is-maker {
    z-index: 9000 !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    min-height: 0;
    border-radius: 0;
    transform: none !important;
  }
}

/* ---------- Terminal.app ---------- */
.window.is-terminal {
  z-index: 1000;
  top: 50%;
  left: 50%;
  width: 480px;
  margin-top: -250px;
  margin-left: -240px;
}
.window.is-terminal .window_top-bar { box-shadow: inset 0 -1px 0 rgba(248, 255, 243, .08); }
.window_content.is-terminal {
  background-color: var(--off-black);
  color: var(--off-white);
  justify-content: flex-start;
  align-items: stretch;
  padding: 1rem 1.25rem 1.25rem;
  min-height: 340px;
  max-height: calc(100dvh - 200px);
  overflow: auto;
  font-family: JetBrains Mono, monospace;
  font-size: 13px;
  line-height: 1.6;
  cursor: text;
}
.terminal_out { white-space: pre-wrap; overflow-wrap: anywhere; }
.terminal_line { min-height: 1.6em; }
.terminal_line.is-cmd::before { content: "$ "; color: var(--yellow); }
.terminal_line.is-ok { color: #a3f0a1; }
.terminal_line.is-dim { opacity: .45; }
.terminal_caret {
  display: inline-block;
  width: .6em;
  height: 1.1em;
  margin-bottom: -.2em;
  background: var(--off-white);
  animation: terminal-blink 1s steps(1) infinite;
}
@keyframes terminal-blink { 50% { opacity: 0; } }
.terminal_avatar {
  display: block;
  width: 168px;
  height: 168px;
  margin: .75rem 0;
  border-radius: 6px;
}
.terminal_form { display: flex; align-items: center; gap: .6em; margin: .25rem 0 0; }
.terminal_prompt { color: var(--pink); flex: none; }
.terminal_input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  padding: 0;
  color: var(--off-white);
  caret-color: var(--off-white);
  font: inherit;
}
.terminal_input::placeholder { color: var(--off-white); opacity: .3; }
@media screen and (max-width: 767px) {
  .window.is-terminal {
    top: 60px;
    left: 12px;
    width: calc(100vw - 24px);
    margin: 0;
  }
  .window_content.is-terminal { min-height: 0; max-height: calc(100dvh - 210px); font-size: 12px; padding: .875rem 1rem 1rem; }
  .terminal_input { font-size: 16px; } /* no iOS zoom on focus */
  .terminal_avatar { width: 136px; height: 136px; }
}
@media (prefers-reduced-motion: reduce) {
  .terminal_caret { animation: none; }
}

/* about.info: 2x2 lineup of current characters (replaces the old raster info-image) */
.info-lineup { display: grid; grid-template-columns: 1fr 1fr; width: 100%; aspect-ratio: 1 / 1; }
.info-lineup img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* About popup: Sampo is a single SVG now (no photo toggle) */
.about-os-images-wrapper { cursor: default; }