/* GENERADO: editar src/ o styles/ y ejecutar npm run build. Orden: sources.manifest.json. */
/* Adaptació compartida: escriptori, finestres i contingut de les aplicacions. */
:root {
  --screen-height: 100dvh;
  --screen-top: 0px;
  --keyboard-inset: 0px;
  --edge: max(12px, env(safe-area-inset-left), env(safe-area-inset-right));
  --dock-bottom: max(12px, env(safe-area-inset-bottom));
}
.win__body {
  min-width: 0;
  container-type: inline-size;
  overscroll-behavior: contain;
}
.win__body :is(.preferences-main, .content-card, .folder, .sys-card, .clink > span) {
  min-width: 0;
}
.win__body :is(p, h2, h3, .bio, .file-row, .clink, .pref-row, .app-title) {
  overflow-wrap: anywhere;
}
.win__body :is(img, video, iframe) {
  max-width: 100%;
}
.win__body :is(.content-grid, .folder-grid, .sys-grid, .wallpaper-picker) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}
.profile-hero__terminal,
.vault-top,
.arcade-heading,
.music-heading,
.music-track,
.welcome-actions,
.ascii-actions {
  flex-wrap: wrap;
}
.win__bar {
  flex-shrink: 0;
}
.win__title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.win__title .t-ico,
.win__btns {
  flex-shrink: 0;
}
.term {
  min-height: 180px;
  min-width: 0;
}
.term__out {
  min-height: 0;
  overflow-wrap: anywhere;
}
.term__line {
  flex-wrap: wrap;
}
.term__in {
  flex-basis: 120px;
}
.game {
  min-width: 0;
}
.game canvas {
  flex-shrink: 0;
}
#music-dock {
  max-width: calc(100vw - 2 * var(--edge));
  max-height: calc(var(--screen-height) - 110px);
  overflow: auto;
}
.toasts {
  max-width: calc(100vw - 2 * var(--edge));
  right: var(--edge);
  bottom: calc(90px + env(safe-area-inset-bottom));
  pointer-events: none;
}
.toast {
  max-width: 100%;
  overflow-wrap: anywhere;
}
#mascot-chat {
  display: flex;
  gap: 0;
  max-width: calc(100vw - 2 * var(--edge));
  max-height: calc(var(--screen-height) - 120px);
}
#mascot-chat .mascot-head {
  flex-shrink: 0;
}
#mascot-chat .mascot-log {
  flex: 1 1 0;
  min-height: 0;
}
#mascot-chat .mascot-form {
  flex-shrink: 0;
  flex-wrap: nowrap;
}
#mascot-chat .mascot-results {
  flex-shrink: 0;
}
#command-palette {
  padding-top: max(16px, calc(var(--screen-height) * 0.1));
}
#command-palette > section {
  max-height: calc(var(--screen-height) - 32px);
  display: flex;
  flex-direction: column;
}
#palette-results {
  min-height: 0;
  max-height: calc(var(--screen-height) - 180px);
}
#palette-results > button {
  min-width: 0;
}
#palette-results > button > span {
  min-width: 0;
  flex: 1;
  overflow-wrap: anywhere;
}
#palette-results .os-icon {
  flex-shrink: 0;
}
.menu {
  position: fixed;
  max-height: calc(var(--screen-height) - 110px);
  overscroll-behavior: contain;
}
.ctx {
  position: fixed;
  max-width: calc(100vw - 16px);
  max-height: calc(var(--screen-height) - 24px);
  overflow: auto;
}
.taskbar {
  bottom: var(--dock-bottom);
}
.taskbar__apps {
  min-width: 0;
  overscroll-behavior-x: contain;
}
.tb-app,
.taskbar__start,
#desktop-tools {
  flex-shrink: 0;
}
.taskbar__apps {
  flex: 1 1 auto;
}

/* Una finestra estreta també necessita una composició compacta en ordinador. */
@container (max-width: 600px) {
  .preferences,
  .preferences--updates {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .preferences-nav {
    position: static;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
  }
  .preferences-nav h2,
  .preferences-nav > .card-kicker {
    flex-basis: 100%;
  }
  .preferences-nav > a {
    margin: 0;
    padding: 8px 0;
  }
  .preferences-note {
    display: none;
  }
  .arcade-grid,
  .arcade-grid--v2 {
    grid-template-columns: minmax(0, 1fr);
  }
  .game-card {
    min-height: 200px;
  }
  .pref-row {
    flex-wrap: wrap;
    padding: 12px 0;
    gap: 10px;
  }
  .pref-row select {
    max-width: 100%;
  }
  .profile-hero h2 {
    font-size: clamp(25px, 7cqw, 36px);
  }
  .vault-challenges .vault-question {
    padding: 16px;
  }
}
@container (max-width: 360px) {
  .theme-picker {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 820px) {
  .desktop {
    inset: 0;
    padding: calc(16px + env(safe-area-inset-top)) var(--edge)
      calc(110px + env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .icons {
    position: relative;
    inset: auto;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-auto-rows: minmax(104px, auto);
    gap: 12px;
    overflow: visible;
    pointer-events: auto;
  }
  .icon {
    min-width: 0;
    padding: 10px 6px;
  }
  .icon .lbl {
    font-size: 12px;
    overflow-wrap: anywhere;
  }
  .window,
  .window.maximized {
    position: fixed !important;
    left: var(--edge) !important;
    top: calc(var(--screen-top) + max(8px, env(safe-area-inset-top))) !important;
    width: calc(100vw - 2 * var(--edge)) !important;
    height: calc(
      var(--screen-height) - max(8px, env(safe-area-inset-top)) - 94px - env(safe-area-inset-bottom)
    ) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border-radius: 12px !important;
  }
  .win__body {
    padding: clamp(14px, 3vw, 24px);
  }
  .win__bar {
    height: 52px;
    min-height: 52px;
    padding: 0 6px 0 12px;
    gap: 6px;
    cursor: default;
  }
  .win__btns {
    gap: 2px;
  }
  .win-btn {
    width: 40px;
    height: 40px;
  }
  .win-btn.max,
  .win__resize {
    display: none;
  }
  .taskbar {
    left: 104px;
    right: var(--edge);
    width: auto;
    max-width: none;
    min-width: 0;
    height: 60px;
    padding: 6px;
    gap: 6px;
    transform: none;
  }
  .taskbar__start,
  .tb-app {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }
  .taskbar__apps {
    max-width: none;
    gap: 4px;
    scrollbar-width: none;
  }
  .taskbar .shell-tools {
    gap: 0;
  }
  .taskbar .shell-tools button {
    width: 44px;
    height: 44px;
  }
  #launch-settings,
  #launch-saver {
    display: none;
  }
  #desktop-tools {
    gap: 0;
  }
  .taskbar__tray {
    display: none;
  }
  #mascot-button {
    left: var(--edge);
    right: auto;
    bottom: var(--dock-bottom);
    width: 76px;
    height: 65px;
  }
  #mascot-button .mascot-svg {
    width: 76px;
    height: 65px;
  }
  #mascot-button .milo-label {
    display: none;
  }
  #mascot-chat {
    left: var(--edge);
    right: auto;
    bottom: calc(92px + var(--keyboard-inset) + env(safe-area-inset-bottom));
    width: min(390px, calc(100vw - 2 * var(--edge)));
    height: min(540px, calc(var(--screen-height) - 120px - env(safe-area-inset-bottom)));
    padding: 8px;
  }
  .mascot-form {
    padding: 10px 4px;
  }
  .mascot-form .btn {
    min-width: 64px;
  }
  .menu {
    left: var(--edge);
    right: var(--edge);
    bottom: calc(88px + env(safe-area-inset-bottom));
    width: auto;
    max-width: 390px;
    transform: none;
  }
  .menu__apps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .menu__apps button {
    min-width: 0;
    min-height: 44px;
    overflow-wrap: anywhere;
  }
  .menu__apps .os-icon {
    flex-shrink: 0;
  }
  .preferences,
  .preferences--updates {
    grid-template-columns: minmax(0, 1fr);
  }
  .pref-row {
    flex-wrap: wrap;
    padding: 12px 0;
  }
  .pref-row :is(select, input[type="range"]) {
    max-width: 100%;
    min-width: 0;
  }
  .vault-top {
    gap: 10px;
  }
  .vault h2 {
    margin-top: 14px;
    font-size: 24px;
  }
  .vault-note .btn {
    flex: 1 1 160px;
    white-space: normal;
    padding: 12px;
  }
  #corruption-recovery {
    max-width: calc(100vw - 2 * var(--edge));
    flex-wrap: wrap;
  }
}
@media (max-width: 480px) {
  .icons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .icon .os-icon {
    width: 52px;
    height: 52px;
  }
  .taskbar {
    left: 96px;
  }
  .profile-hero__terminal {
    align-items: flex-start;
  }
  .clink {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 10px;
  }
  .contact--modern h2 {
    font-size: 26px;
  }
  .vault-lock-caption {
    letter-spacing: 0;
  }
  .palette-head {
    padding: 12px;
    gap: 8px;
  }
  #palette-results > button small {
    display: none;
  }
}
@media (max-width: 350px) {
  .icons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (pointer: coarse) {
  button,
  a,
  .folder {
    touch-action: manipulation;
  }
  .win__body :is(.btn, select, .vault-hint-button) {
    min-height: 44px;
  }
  :is(.mascot-form, .vault-question, .palette-head) input,
  .term__in {
    font-size: 16px;
  }
  #mascot-close {
    width: 40px;
    height: 40px;
  }
  .folder {
    cursor: pointer;
  }
}
@media (max-height: 500px) and (max-width: 1000px) {
  .desktop {
    overflow-y: auto;
  }
  .icons {
    grid-auto-rows: minmax(90px, auto);
  }
  .win__body {
    padding: 12px;
  }
  #mascot-chat {
    height: calc(var(--screen-height) - 105px);
    max-height: calc(var(--screen-height) - 105px);
    bottom: calc(88px + var(--keyboard-inset));
  }
  #mascot-chat .milo-mode {
    display: none;
  }
  #os-screensaver .saver-stage {
    inset: 16% 0 28%;
    gap: 10px;
  }
  #os-screensaver .saver-terminal-foot {
    bottom: 12px;
    gap: 6px;
    font-size: 9px;
  }
}