/* === ASTERRVN ≤1024px: horizontal overflow (v6.2 .folder-row !important vs narrow grid; 100vw scrollbar gap) === */
@media (max-width: 1024px) {
  body.asterrvn-viewer-narrow html,
  body.asterrvn-tablet html,
  body.asterrvn-phone html {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }
  body.asterrvn-viewer-narrow,
  body.asterrvn-tablet,
  body.asterrvn-phone {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }
  body.asterrvn-viewer-narrow .os-window,
  body.asterrvn-tablet .os-window,
  body.asterrvn-phone .os-window {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
    /* Menubar row hidden below — 3-row shell; row 1 must size to titlebar (narrow uses 44px in ≤640), not fixed 28px */
    grid-template-rows: auto 1fr 24px;
  }
  body.asterrvn-viewer-narrow .titlebar,
  body.asterrvn-tablet .titlebar,
  body.asterrvn-phone .titlebar {
    min-width: 0;
    max-width: 100%;
  }
  body.asterrvn-viewer-narrow .menubar,
  body.asterrvn-tablet .menubar,
  body.asterrvn-phone .menubar {
    display: none !important;
  }
  body.asterrvn-viewer-narrow .sidebar,
  body.asterrvn-tablet .sidebar,
  body.asterrvn-phone .sidebar {
    grid-row: 2;
  }
  body.asterrvn-viewer-narrow .content,
  body.asterrvn-tablet .content,
  body.asterrvn-phone .content {
    grid-row: 2;
  }
  body.asterrvn-viewer-narrow .scrollbar,
  body.asterrvn-tablet .scrollbar,
  body.asterrvn-phone .scrollbar {
    grid-row: 2;
  }
  body.asterrvn-viewer-narrow .statusbar,
  body.asterrvn-tablet .statusbar,
  body.asterrvn-phone .statusbar {
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
    grid-row: 3;
  }
  body.asterrvn-viewer-narrow .statusbar .frames,
  body.asterrvn-tablet .statusbar .frames,
  body.asterrvn-phone .statusbar .frames {
    min-width: 0;
    overflow-x: clip;
  }
  body.asterrvn-viewer-narrow .terminal,
  body.asterrvn-tablet .terminal,
  body.asterrvn-phone .terminal {
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
  }
  body.asterrvn-viewer-narrow .folder-row,
  body.asterrvn-tablet .folder-row,
  body.asterrvn-phone .folder-row {
    grid-template-columns: 16px minmax(0, 1.4fr) minmax(0, 1fr) auto !important;
    column-gap: 8px !important;
    padding-right: 4px !important;
  }
  body.asterrvn-viewer-narrow .folder-row .name,
  body.asterrvn-viewer-narrow .folder-row .meta,
  body.asterrvn-tablet .folder-row .name,
  body.asterrvn-tablet .folder-row .meta,
  body.asterrvn-phone .folder-row .name,
  body.asterrvn-phone .folder-row .meta {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  body.asterrvn-viewer-narrow .folder-row .meta,
  body.asterrvn-tablet .folder-row .meta,
  body.asterrvn-phone .folder-row .meta {
    justify-self: stretch !important;
    text-align: right !important;
  }
  body.asterrvn-viewer-narrow .folder-row .size,
  body.asterrvn-tablet .folder-row .size,
  body.asterrvn-phone .folder-row .size {
    min-width: 0 !important;
    white-space: nowrap !important;
    justify-self: end !important;
    text-align: right !important;
  }
  body.asterrvn-viewer-narrow #termBody .folder-list,
  body.asterrvn-tablet #termBody .folder-list,
  body.asterrvn-phone #termBody .folder-list {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
  }
}

/* Terminal window controls: viewer-narrow up to 1024px (matches JS isAsterrvnViewerNarrowRuntime) */
@media (max-width: 1024px) {
  body.asterrvn-viewer-narrow .about-view .terminal .terminal-window-controls {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    height: 100%;
    flex: 0 0 auto;
    z-index: 4;
  }
  body.asterrvn-viewer-narrow .about-view .terminal .terminal-window-btn {
    width: 24px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    box-sizing: border-box;
    border: 1px solid var(--line-chrome);
    box-shadow: none;
    background: rgba(0, 10, 18, 0.78);
    color: var(--accent-bright);
    font: inherit;
    font-size: 10px;
    line-height: 1;
    padding: 0;
    border-radius: 0;
    touch-action: manipulation;
    cursor: url("../../refs/New-Cursor-Finger.png") 8 1, pointer;
  }
  body.asterrvn-viewer-narrow .about-view .terminal .terminal-window-btn:active {
    transform: translateY(1px);
    filter: brightness(1.35);
  }
  body.asterrvn-viewer-narrow .about-view .terminal .terminal-window-close {
    color: var(--warn);
    border-color: rgba(255, 51, 112, 0.45);
  }
}

/* === ASTERRVN phone composition (<=640px): compact titlebar, hero, boot terminal === */
@media (max-width: 640px) {
  /* Titlebar: one functional row — brand + open tabs + RU/EN (no fake window chrome) */
  body.asterrvn-viewer-narrow .titlebar .tab.plus,
  body.asterrvn-phone .titlebar .tab.plus,
  body.asterrvn-viewer-narrow .titlebar .spacer,
  body.asterrvn-phone .titlebar .spacer,
  body.asterrvn-viewer-narrow .titlebar .version,
  body.asterrvn-phone .titlebar .version,
  body.asterrvn-viewer-narrow .titlebar .controls,
  body.asterrvn-phone .titlebar .controls {
    display: none !important;
  }
  body.asterrvn-viewer-narrow .titlebar,
  body.asterrvn-phone .titlebar {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0 4px 0 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  body.asterrvn-viewer-narrow .titlebar::-webkit-scrollbar,
  body.asterrvn-phone .titlebar::-webkit-scrollbar {
    display: none;
  }
  body.asterrvn-viewer-narrow .titlebar .lang-switch,
  body.asterrvn-phone .titlebar .lang-switch {
    margin-left: auto;
    flex: 0 0 auto;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-left: 1px solid var(--line);
  }
  body.asterrvn-viewer-narrow .titlebar .tab,
  body.asterrvn-phone .titlebar .tab {
    flex: 0 1 auto;
    min-width: 0;
    padding: 0 8px;
    font-size: 9px;
    letter-spacing: 0.02em;
    gap: 4px;
  }
  body.asterrvn-viewer-narrow .titlebar .tab .x,
  body.asterrvn-phone .titlebar .tab .x {
    margin-left: 2px;
    font-size: 11px;
    opacity: 0.85;
  }
  body.asterrvn-viewer-narrow .titlebar .access-denied,
  body.asterrvn-phone .titlebar .access-denied {
    right: 10px;
    top: 26px;
  }

  /* Viewer-narrow phone: compact OS-style chrome — brand | open tabs | RU/EN (desktop widths unchanged) */
  body.asterrvn-viewer-narrow .titlebar {
    align-items: center;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    padding: 0 6px 0 8px;
    gap: 0;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  body.asterrvn-viewer-narrow .titlebar .tab.plus,
  body.asterrvn-viewer-narrow .titlebar .tab .x {
    display: none !important;
  }
  body.asterrvn-viewer-narrow .titlebar .tab[data-view="about"] {
    flex: 0 1 auto;
    max-width: 112px;
    min-width: 0;
    height: 100%;
    padding: 0 8px;
    gap: 4px;
    justify-content: center;
    font-size: 8px;
    letter-spacing: 0.02em;
    border-right: 1px solid var(--line);
    box-sizing: border-box;
  }
  body.asterrvn-viewer-narrow .titlebar .tab[data-view="about"] > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.asterrvn-viewer-narrow .titlebar .tab[data-dynamic-tab] {
    flex: 1 1 0;
    min-width: 0;
    max-width: 132px;
    height: 100%;
    padding: 0 8px;
    gap: 4px;
    justify-content: center;
    font-size: 8px;
    letter-spacing: 0.02em;
    border-right: 1px solid var(--line);
    box-sizing: border-box;
  }
  body.asterrvn-viewer-narrow .titlebar .tab[data-dynamic-tab] > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.asterrvn-viewer-narrow .titlebar .lang-switch {
    margin-left: auto;
    flex: 0 0 auto;
    align-self: stretch;
    height: auto;
    padding: 0 10px;
    white-space: nowrap;
    font-size: 8px;
    box-sizing: border-box;
  }
  body.asterrvn-viewer-narrow .titlebar .access-denied {
    top: 48px;
  }

  body.asterrvn-viewer-narrow .titlebar,
  body.asterrvn-phone .titlebar {
    height: 28px;
    min-height: 28px;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
  }

  body.asterrvn-viewer-narrow .titlebar .tab.plus,
  body.asterrvn-phone .titlebar .tab.plus {
    display: none !important;
  }

  body.asterrvn-viewer-narrow .titlebar .tab .x,
  body.asterrvn-phone .titlebar .tab .x {
    display: flex !important;
  }

  body.asterrvn-viewer-narrow .titlebar .tab,
  body.asterrvn-phone .titlebar .tab {
    flex: 0 0 auto;
    max-width: none;
    padding: 0 12px;
    gap: 8px;
    font-size: 8px;
    letter-spacing: 0.5px;
    border-right: 1px solid var(--line);
  }

  body.asterrvn-viewer-narrow .titlebar .tab[data-view="about"],
  body.asterrvn-viewer-narrow .titlebar .tab[data-dynamic-tab],
  body.asterrvn-phone .titlebar .tab[data-view="about"],
  body.asterrvn-phone .titlebar .tab[data-dynamic-tab] {
    flex: 0 0 auto;
    max-width: none;
    padding: 0 12px;
  }

  body.asterrvn-viewer-narrow .titlebar .tab .x,
  body.asterrvn-phone .titlebar .tab .x {
    margin-left: 0;
    font-size: 10px;
    opacity: 0.9;
    align-items: center;
  }

  body.asterrvn-viewer-narrow .titlebar .lang-switch,
  body.asterrvn-phone .titlebar .lang-switch {
    position: sticky;
    right: 0;
    z-index: 4;
    margin-left: auto;
    padding: 0 14px;
    font-size: 8px;
    background: var(--bg);
  }

  /* Hero: mobile scale; avoid isolation/overflow:hidden (reads as black behind VP9-alpha tag) */
  body.asterrvn-viewer-narrow .about-view .hero,
  body.asterrvn-phone .about-view .hero {
    min-height: 0;
    margin: 0 auto 8px;
    padding: 4px 0 2px;
    max-width: 100%;
    overflow-x: clip;
    overflow-y: visible;
    isolation: auto;
    background: transparent !important;
    background-color: transparent !important;
  }
  body.asterrvn-viewer-narrow .about-view .hero .coord,
  body.asterrvn-phone .about-view .hero .coord {
    display: none !important;
  }
  body.asterrvn-viewer-narrow .about-view .hero video.logo-tag-video,
  body.asterrvn-phone .about-view .hero video.logo-tag-video {
    display: none !important;
  }
  body.asterrvn-viewer-narrow .about-view .hero .logo-tag-mobile-webp,
  body.asterrvn-phone .about-view .hero .logo-tag-mobile-webp {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: min(26vh, 200px) !important;
    object-fit: contain !important;
    transform: none !important;
    margin: 0 auto !important;
    margin-bottom: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none;
  }

  /* Boot terminal: normal document flow — no desktop z-stack / inner scroll cage */
  body.asterrvn-viewer-narrow .about-view .terminal,
  body.asterrvn-phone .about-view .terminal {
    --phone-head-w: clamp(180px, 52vw, 260px);
    --phone-head-top: clamp(14px, 3.8vw, 36px);
    --phone-head-shift-x: 0px;
    --phone-head-right: calc(var(--phone-head-w) * -0.5);
    --phone-head-opacity: 1;
    width: 100%;
    max-width: 100%;
    margin-top: 0 !important;
    margin-bottom: 0;
    box-sizing: border-box;
    position: relative;
    z-index: auto;
    isolation: auto;
    contain: none;
    overflow-x: clip;
    overflow-y: visible;
  }
  body.asterrvn-viewer-narrow .about-view .terminal {
    overflow-x: clip !important;
    overflow-y: visible;
  }
  body.asterrvn-viewer-narrow .about-view .terminal::before,
  body.asterrvn-phone .about-view .terminal::before {
    z-index: 0 !important;
    pointer-events: none !important;
  }
  body.asterrvn-viewer-narrow .about-view .terminal-head,
  body.asterrvn-phone .about-view .terminal-head {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
    padding: 4px 4px 4px 8px;
    font-size: 7px;
    position: relative;
    z-index: 3;
  }
  body.asterrvn-viewer-narrow .about-view .terminal-head-right,
  body.asterrvn-phone .about-view .terminal-head-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    justify-content: flex-end !important;
  }
  body.asterrvn-viewer-narrow .about-view .terminal-head .left,
  body.asterrvn-phone .about-view .terminal-head .left {
    display: block;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.asterrvn-viewer-narrow .about-view .terminal-head .terminal-session-meta,
  body.asterrvn-phone .about-view .terminal-head .terminal-session-meta {
    max-width: min(200px, 38vw);
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
    line-height: 1;
  }
  body.asterrvn-viewer-narrow .about-view .terminal .terminal-head {
    padding-right: 4px;
  }
  body.asterrvn-viewer-narrow .about-view .terminal .terminal-head > .left {
    flex: 1 1 auto;
    min-width: 0;
  }
  body.asterrvn-viewer-narrow .about-view .terminal .terminal-head-right {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
    flex: 0 0 auto;
    height: 100%;
  }
  body.asterrvn-viewer-narrow .about-view .terminal .terminal-session-meta {
    display: inline-flex;
    align-items: center;
    height: 100%;
    line-height: 1;
    white-space: nowrap;
    color: inherit;
  }
  body.asterrvn-viewer-narrow .about-view .terminal #termBody.terminal-body,
  body.asterrvn-phone .about-view .terminal #termBody.terminal-body {
    box-sizing: border-box !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: clip;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: auto;
    padding: 10px 12px max(14px, calc(env(safe-area-inset-bottom, 0px) + 12px)) !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    position: relative;
    z-index: 1;
  }
  body.asterrvn-viewer-narrow #termBody .term-line,
  body.asterrvn-phone #termBody .term-line {
    white-space: pre-wrap;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    max-width: 100%;
    box-sizing: border-box;
  }
  body.asterrvn-viewer-narrow #termBody .folder-list,
  body.asterrvn-phone #termBody .folder-list {
    margin-top: 10px !important;
    padding-top: 8px !important;
    font-size: 11px !important;
  }

  /* About stack below boot: own stacking, no overlap from boot panel */
  body.asterrvn-viewer-narrow .about-view .aboutme-view,
  body.asterrvn-phone .about-view .aboutme-view {
    position: relative;
    z-index: 0;
    margin-top: 18px;
    max-width: 100%;
    box-sizing: border-box;
  }
  body.asterrvn-viewer-narrow .about-view .id-card,
  body.asterrvn-phone .about-view .id-card {
    position: relative;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
  }
  body.asterrvn-viewer-narrow .about-view .id-card-body > .id-row:nth-child(1) .v,
  body.asterrvn-phone .about-view .id-card-body > .id-row:nth-child(1) .v,
  body.asterrvn-viewer-narrow .about-view .id-card-body > .id-row:nth-child(2) .v,
  body.asterrvn-phone .about-view .id-card-body > .id-row:nth-child(2) .v,
  body.asterrvn-viewer-narrow .about-view .id-card-body > .id-row:nth-child(3) .v,
  body.asterrvn-phone .about-view .id-card-body > .id-row:nth-child(3) .v,
  body.asterrvn-viewer-narrow .about-view .id-card-body > .id-row:nth-child(5) .v,
  body.asterrvn-phone .about-view .id-card-body > .id-row:nth-child(5) .v {
    margin-left: 0 !important;
  }
  body.asterrvn-viewer-narrow .about-view .id-card-body,
  body.asterrvn-phone .about-view .id-card-body,
  body.asterrvn-viewer-narrow .about-view .id-row .v,
  body.asterrvn-phone .about-view .id-row .v {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  body.asterrvn-viewer-narrow .about-view .manifesto,
  body.asterrvn-phone .about-view .manifesto {
    max-width: 100%;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    font-size: clamp(12px, 3.5vw, 14px);
    line-height: 1.45;
    letter-spacing: 0;
  }
  body.asterrvn-viewer-narrow .about-view .manifesto p,
  body.asterrvn-phone .about-view .manifesto p {
    max-width: 100%;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin-bottom: 10px;
    padding-left: 8px;
    padding-right: 4px;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal;
    text-wrap: pretty;
  }

  /* Phone: same img.hero-side-art as desktop — position only until .revealed; do not override reveal/animation */
  body.asterrvn-viewer-narrow .about-view .terminal img.hero-side-art,
  body.asterrvn-phone .about-view .terminal img.hero-side-art {
    display: block !important;
    position: absolute !important;
    left: auto !important;
    right: 0 !important;
    top: var(--phone-head-top) !important;
    width: var(--phone-head-w) !important;
    max-width: none !important;
    height: auto;
    transform: translateX(var(--phone-head-shift-x)) !important;
    z-index: 1 !important;
    pointer-events: none !important;
    image-rendering: pixelated;
  }

  body.asterrvn-viewer-narrow .about-view .terminal img.hero-side-art.revealed,
  body.asterrvn-phone .about-view .terminal img.hero-side-art.revealed {
    /* opacity/visibility/reveal animation: same as desktop .hero-side-art.revealed — do not override */
    pointer-events: auto !important;
    cursor: pointer;
  }

  body.asterrvn-viewer-narrow .about-view .terminal img.hero-side-art.head-click-glitch,
  body.asterrvn-phone .about-view .terminal img.hero-side-art.head-click-glitch {
    animation: head-pixel-pulse-v52-phone .36s steps(5) both !important;
  }

  body.asterrvn-viewer-narrow .about-view .terminal #termBody,
  body.asterrvn-phone .about-view .terminal #termBody,
  body.asterrvn-viewer-narrow .about-view .terminal .terminal-body,
  body.asterrvn-phone .about-view .terminal .terminal-body,
  body.asterrvn-viewer-narrow .about-view .terminal #termBody.terminal-body,
  body.asterrvn-phone .about-view .terminal #termBody.terminal-body {
    position: relative !important;
    z-index: 2 !important;
    background: transparent !important;
    background-color: transparent !important;
  }

  body.asterrvn-viewer-narrow .about-view .terminal .terminal-head,
  body.asterrvn-phone .about-view .terminal .terminal-head {
    position: relative !important;
    z-index: 3 !important;
  }

  body.asterrvn-viewer-narrow .about-view .terminal .terminal-body::before,
  body.asterrvn-phone .about-view .terminal .terminal-body::before,
  body.asterrvn-viewer-narrow .about-view .terminal .terminal-body::after,
  body.asterrvn-phone .about-view .terminal .terminal-body::after {
    background: transparent !important;
    pointer-events: none !important;
  }

  /* Phone + viewer-narrow: illusion layer ~30% brighter read (direct child of .about-view, not under .hero) */
  body.asterrvn-viewer-narrow .about-view > .system-illusion-layer {
    opacity: 0.524 !important;
  }
  body.asterrvn-viewer-narrow .about-view > .system-illusion-layer .system-illusion-video {
    filter: brightness(1.15) contrast(1.05) !important;
  }
}

@keyframes head-pixel-pulse-v52-phone {
  0% {
    opacity: .92;
    transform: translateX(var(--phone-head-shift-x)) scale(1);
    filter: contrast(1.05) brightness(.92);
  }
  25% {
    opacity: .62;
    transform: translateX(var(--phone-head-shift-x)) scale(1.003);
    filter: blur(.8px) contrast(2.6) brightness(.86);
    clip-path: polygon(2% 3%, 98% 0, 96% 96%, 6% 100%);
  }
  45% {
    opacity: .94;
    transform: translateX(var(--phone-head-shift-x)) scale(.998);
    filter: invert(.05) contrast(2.8) brightness(.82);
    clip-path: polygon(0 0, 100% 4%, 98% 92%, 3% 100%);
  }
  70% {
    opacity: .74;
    transform: translateX(var(--phone-head-shift-x)) scale(1.001);
    filter: contrast(1.9) brightness(.8);
  }
  100% {
    opacity: .92;
    transform: translateX(var(--phone-head-shift-x)) scale(1);
    filter: contrast(1.05) brightness(.92);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

/* === PASS 4B: mobile titlebar — uniform 1px dividers (no double stack) === */
@media (max-width: 1024px) {
  body.asterrvn-viewer-narrow .titlebar .tab.active::after,
  body.asterrvn-tablet .titlebar .tab.active::after,
  body.asterrvn-phone .titlebar .tab.active::after {
    display: none;
  }

  body.asterrvn-viewer-narrow .titlebar .tab,
  body.asterrvn-tablet .titlebar .tab,
  body.asterrvn-phone .titlebar .tab {
    border-top: none;
    border-bottom: none;
    border-left: none;
    border-right: 1px solid var(--line);
    box-shadow: none;
    outline: none;
  }

  body.asterrvn-viewer-narrow .titlebar .tab.active,
  body.asterrvn-tablet .titlebar .tab.active,
  body.asterrvn-phone .titlebar .tab.active {
    box-shadow: none;
  }

  body.asterrvn-viewer-narrow .titlebar .lang-switch,
  body.asterrvn-tablet .titlebar .lang-switch,
  body.asterrvn-phone .titlebar .lang-switch {
    border: none;
    box-shadow: inset 1px 0 0 var(--line);
  }
}

/* === PASS 4B: mobile HOME boot — controlled HTML lines wrap cleanly === */
@media (max-width: 1024px) {
  body.asterrvn-viewer-narrow #termBody .term-line,
  body.asterrvn-tablet #termBody .term-line,
  body.asterrvn-phone #termBody .term-line {
    overflow-wrap: normal;
    word-break: normal;
  }

  body.asterrvn-viewer-narrow #termBody .term-line:not(.profile-kv),
  body.asterrvn-tablet #termBody .term-line:not(.profile-kv),
  body.asterrvn-phone #termBody .term-line:not(.profile-kv) {
    white-space: pre-wrap;
  }

  body.asterrvn-viewer-narrow #termBody .term-line .dim,
  body.asterrvn-viewer-narrow #termBody .term-line .accent,
  body.asterrvn-viewer-narrow #termBody .term-line .key,
  body.asterrvn-viewer-narrow #termBody .term-line .ok,
  body.asterrvn-tablet #termBody .term-line .dim,
  body.asterrvn-tablet #termBody .term-line .accent,
  body.asterrvn-tablet #termBody .term-line .key,
  body.asterrvn-tablet #termBody .term-line .ok,
  body.asterrvn-phone #termBody .term-line .dim,
  body.asterrvn-phone #termBody .term-line .accent,
  body.asterrvn-phone #termBody .term-line .key,
  body.asterrvn-phone #termBody .term-line .ok {
    white-space: normal;
  }
}

/* === PASS 4C: mobile HOME — head peek (~50% visible), text lane, hairline titlebar === */
@media (max-width: 1024px) {
  body.asterrvn-viewer-narrow .about-view .terminal,
  body.asterrvn-tablet .about-view .terminal,
  body.asterrvn-phone .about-view .terminal {
    --phone-head-w: clamp(180px, 52vw, 260px);
    --phone-head-top: clamp(14px, 3.8vw, 36px);
    --phone-head-shift-x: 0px;
    --phone-head-right: calc(var(--phone-head-w) * -0.5);
    --phone-text-lane: calc(var(--phone-head-w) * 0.5 + 10px);
  }

  body.asterrvn-viewer-narrow .about-view .terminal img.hero-side-art,
  body.asterrvn-tablet .about-view .terminal img.hero-side-art,
  body.asterrvn-phone .about-view .terminal img.hero-side-art {
    display: block !important;
    right: var(--phone-head-right) !important;
    top: var(--phone-head-top) !important;
    width: var(--phone-head-w) !important;
    max-width: none !important;
    height: auto;
    transform: translateX(var(--phone-head-shift-x)) !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  body.asterrvn-viewer-narrow .about-view .terminal img.hero-side-art.revealed,
  body.asterrvn-tablet .about-view .terminal img.hero-side-art.revealed,
  body.asterrvn-phone .about-view .terminal img.hero-side-art.revealed {
    pointer-events: auto !important;
  }

  body.asterrvn-viewer-narrow .about-view .terminal #termBody.terminal-body,
  body.asterrvn-tablet .about-view .terminal #termBody.terminal-body,
  body.asterrvn-phone .about-view .terminal #termBody.terminal-body {
    max-width: 100%;
    box-sizing: border-box;
    padding-right: max(
      12px,
      calc(12px + var(--phone-text-lane))
    ) !important;
  }

  body.asterrvn-viewer-narrow .about-view .terminal #termBody .term-line,
  body.asterrvn-tablet .about-view .terminal #termBody .term-line,
  body.asterrvn-phone .about-view .terminal #termBody .term-line {
    max-width: 100%;
    box-sizing: border-box;
  }

  body.asterrvn-viewer-narrow .titlebar,
  body.asterrvn-tablet .titlebar,
  body.asterrvn-phone .titlebar {
    border-bottom: 1px solid var(--line);
  }

  body.asterrvn-viewer-narrow .titlebar .tab,
  body.asterrvn-tablet .titlebar .tab,
  body.asterrvn-phone .titlebar .tab,
  body.asterrvn-viewer-narrow .titlebar .tab[data-view="about"],
  body.asterrvn-tablet .titlebar .tab[data-view="about"],
  body.asterrvn-phone .titlebar .tab[data-view="about"],
  body.asterrvn-viewer-narrow .titlebar .tab[data-dynamic-tab],
  body.asterrvn-tablet .titlebar .tab[data-dynamic-tab],
  body.asterrvn-phone .titlebar .tab[data-dynamic-tab] {
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: 1px solid var(--line) !important;
    box-shadow: none !important;
    outline: none !important;
    background-clip: padding-box;
  }

  body.asterrvn-viewer-narrow .titlebar .tab.active,
  body.asterrvn-tablet .titlebar .tab.active,
  body.asterrvn-phone .titlebar .tab.active {
    box-shadow: none !important;
  }

  body.asterrvn-viewer-narrow .titlebar .tab.active::after,
  body.asterrvn-tablet .titlebar .tab.active::after,
  body.asterrvn-phone .titlebar .tab.active::after {
    display: none !important;
  }

  body.asterrvn-viewer-narrow .titlebar .lang-switch,
  body.asterrvn-tablet .titlebar .lang-switch,
  body.asterrvn-phone .titlebar .lang-switch {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
  }
}

/* === PASS 4E: tune text lane + exact half-head visibility === */
@media (max-width: 1024px) {
  body.asterrvn-viewer-narrow .about-view .terminal,
  body.asterrvn-tablet .about-view .terminal,
  body.asterrvn-phone .about-view .terminal {
    --phone-head-w: clamp(180px, 52vw, 260px);
    --phone-head-right: calc(var(--phone-head-w) * -0.5);
    --phone-head-shift-x: 0px;
    --phone-text-lane: calc(var(--phone-head-w) * 0.5 + 10px);
  }

  body.asterrvn-viewer-narrow .about-view .terminal #termBody.terminal-body,
  body.asterrvn-tablet .about-view .terminal #termBody.terminal-body,
  body.asterrvn-phone .about-view .terminal #termBody.terminal-body {
    padding-right: max(10px, calc(10px + var(--phone-text-lane))) !important;
  }

  body.asterrvn-viewer-narrow .about-view .terminal #termBody .term-line[data-edit-key^="boot.profileLines"],
  body.asterrvn-tablet .about-view .terminal #termBody .term-line[data-edit-key^="boot.profileLines"],
  body.asterrvn-phone .about-view .terminal #termBody .term-line[data-edit-key^="boot.profileLines"],
  body.asterrvn-viewer-narrow .about-view .terminal #termBody .term-line[data-edit-key="boot.toolsLines.0"],
  body.asterrvn-tablet .about-view .terminal #termBody .term-line[data-edit-key="boot.toolsLines.0"],
  body.asterrvn-phone .about-view .terminal #termBody .term-line[data-edit-key="boot.toolsLines.0"] {
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  body.asterrvn-viewer-narrow .about-view .terminal #termBody .term-line[data-edit-key^="boot.profileLines"]::-webkit-scrollbar,
  body.asterrvn-tablet .about-view .terminal #termBody .term-line[data-edit-key^="boot.profileLines"]::-webkit-scrollbar,
  body.asterrvn-phone .about-view .terminal #termBody .term-line[data-edit-key^="boot.profileLines"]::-webkit-scrollbar,
  body.asterrvn-viewer-narrow .about-view .terminal #termBody .term-line[data-edit-key="boot.toolsLines.0"]::-webkit-scrollbar,
  body.asterrvn-tablet .about-view .terminal #termBody .term-line[data-edit-key="boot.toolsLines.0"]::-webkit-scrollbar,
  body.asterrvn-phone .about-view .terminal #termBody .term-line[data-edit-key="boot.toolsLines.0"]::-webkit-scrollbar {
    display: none;
  }

  body.asterrvn-viewer-narrow .about-view .terminal #termBody .term-line[data-edit-key^="boot.profileLines"] .dim,
  body.asterrvn-viewer-narrow .about-view .terminal #termBody .term-line[data-edit-key^="boot.profileLines"] .accent,
  body.asterrvn-tablet .about-view .terminal #termBody .term-line[data-edit-key^="boot.profileLines"] .dim,
  body.asterrvn-tablet .about-view .terminal #termBody .term-line[data-edit-key^="boot.profileLines"] .accent,
  body.asterrvn-phone .about-view .terminal #termBody .term-line[data-edit-key^="boot.profileLines"] .dim,
  body.asterrvn-phone .about-view .terminal #termBody .term-line[data-edit-key^="boot.profileLines"] .accent,
  body.asterrvn-viewer-narrow .about-view .terminal #termBody .term-line[data-edit-key="boot.toolsLines.0"] .dim,
  body.asterrvn-viewer-narrow .about-view .terminal #termBody .term-line[data-edit-key="boot.toolsLines.0"] .accent,
  body.asterrvn-tablet .about-view .terminal #termBody .term-line[data-edit-key="boot.toolsLines.0"] .dim,
  body.asterrvn-tablet .about-view .terminal #termBody .term-line[data-edit-key="boot.toolsLines.0"] .accent,
  body.asterrvn-phone .about-view .terminal #termBody .term-line[data-edit-key="boot.toolsLines.0"] .dim,
  body.asterrvn-phone .about-view .terminal #termBody .term-line[data-edit-key="boot.toolsLines.0"] .accent {
    white-space: inherit;
  }
}

/* === PASS 4F2: mobile HOME — manifesto-first order companion head peek (~70% visible) === */
@media (max-width: 1024px) {
  body.asterrvn-viewer-narrow .about-view .terminal,
  body.asterrvn-tablet .about-view .terminal,
  body.asterrvn-phone .about-view .terminal {
    --phone-head-w: clamp(200px, 56vw, 290px);
    --phone-head-right: calc(var(--phone-head-w) * -0.30);
    --phone-head-top: clamp(10px, 2.8vw, 26px);
    --phone-head-shift-x: 0px;
    --phone-text-lane: calc(var(--phone-head-w) * 0.70 + 8px);
  }
}

/* === PASS 4F3: mobile HOME — larger head, wider text lane (target composition) === */
@media (max-width: 1024px) {
  body.asterrvn-viewer-narrow .about-view .terminal,
  body.asterrvn-tablet .about-view .terminal,
  body.asterrvn-phone .about-view .terminal {
    --phone-head-w: clamp(230px, 66vw, 380px);
    --phone-head-right: calc(var(--phone-head-w) * -0.18);
    --phone-head-top: clamp(4px, 1.6vw, 16px);
    --phone-head-shift-x: 0px;
    --phone-text-lane: calc(var(--phone-head-w) * 0.34 + 6px);
  }

  body.asterrvn-viewer-narrow .about-view .terminal img.hero-side-art,
  body.asterrvn-tablet .about-view .terminal img.hero-side-art,
  body.asterrvn-phone .about-view .terminal img.hero-side-art {
    right: var(--phone-head-right) !important;
    left: auto !important;
  }

  body.asterrvn-viewer-narrow .about-view .terminal #termBody.terminal-body,
  body.asterrvn-tablet .about-view .terminal #termBody.terminal-body,
  body.asterrvn-phone .about-view .terminal #termBody.terminal-body {
    padding-right: max(8px, calc(var(--phone-text-lane))) !important;
  }
}

/* === PASS 4G: mobile HOME — push head right, reduce center overlap (~74% visible) === */
@media (max-width: 1024px) {
  body.asterrvn-viewer-narrow .about-view .terminal,
  body.asterrvn-tablet .about-view .terminal,
  body.asterrvn-phone .about-view .terminal {
    --phone-head-w: clamp(220px, 62vw, 350px);
    --phone-head-right: calc(var(--phone-head-w) * -0.26);
    --phone-head-top: clamp(4px, 1.6vw, 16px);
    --phone-head-shift-x: 0px;
    --phone-text-lane: calc(var(--phone-head-w) * 0.26 + 6px);
  }

  body.asterrvn-viewer-narrow .about-view .terminal img.hero-side-art,
  body.asterrvn-tablet .about-view .terminal img.hero-side-art,
  body.asterrvn-phone .about-view .terminal img.hero-side-art {
    right: var(--phone-head-right) !important;
    left: auto !important;
  }

  body.asterrvn-viewer-narrow .about-view .terminal #termBody.terminal-body,
  body.asterrvn-tablet .about-view .terminal #termBody.terminal-body,
  body.asterrvn-phone .about-view .terminal #termBody.terminal-body {
    padding-right: max(8px, calc(var(--phone-text-lane))) !important;
  }
}

/* === PASS 4H: mobile HOME polish — tag lane, folder type scale, head composition === */
@media (max-width: 640px) {
  body.asterrvn-phone .about-view .hero {
    min-height: min(22vh, 168px);
  }
  body.asterrvn-phone .about-view .hero .logo-tag-mobile-webp {
    opacity: 1 !important;
    visibility: visible !important;
  }
  body.asterrvn-phone:not(.asterrvn-home-tag-ready) .about-view .terminal,
  html.asterrvn-phone-root:not(.asterrvn-home-tag-ready) .about-view .terminal {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body.asterrvn-phone.asterrvn-home-tag-ready .about-view .terminal,
  html.asterrvn-phone-root.asterrvn-home-tag-ready .about-view .terminal {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body.asterrvn-phone #termBody .folder-list {
    font-size: clamp(10px, 2.85vw, 12px) !important;
    line-height: 1.32 !important;
    margin-top: 8px !important;
    padding-top: 6px !important;
  }
  body.asterrvn-phone #termBody .folder-row {
    font-size: inherit !important;
    line-height: inherit !important;
    padding: 2px 0 !important;
    column-gap: 6px !important;
  }
  body.asterrvn-phone #termBody .folder-row .name {
    font-size: inherit !important;
    font-family: var(--mono) !important;
    letter-spacing: 0 !important;
  }
  body.asterrvn-phone #termBody .folder-row .meta,
  body.asterrvn-phone #termBody .folder-row .size {
    font-size: clamp(9px, 2.35vw, 10px) !important;
    font-family: var(--mono) !important;
    letter-spacing: 0 !important;
    min-width: 0 !important;
  }
  body.asterrvn-phone #termBody .folder-row .ico {
    font-size: clamp(9px, 2.35vw, 10px) !important;
  }
}

@media (max-width: 1024px) {
  body.asterrvn-phone .about-view .terminal {
    --phone-head-w: clamp(250px, 68vw, 370px);
    --phone-head-right: calc(var(--phone-head-w) * -0.14);
    --phone-head-top: clamp(0px, 1vw, 12px);
    --phone-head-shift-x: 10px;
    --phone-text-lane: calc(var(--phone-head-w) * 0.28 + 6px);
  }

  body.asterrvn-phone .about-view .terminal img.hero-side-art {
    right: var(--phone-head-right) !important;
    left: auto !important;
  }

  body.asterrvn-phone .about-view .terminal #termBody.terminal-body {
    padding-right: max(8px, calc(var(--phone-text-lane))) !important;
  }
}

/* === PASS 4K: mobile HOME — restore boot terminal vertical position (ed2794e hero lane) === */
@media (max-width: 640px) {
  body.asterrvn-phone .about-view .hero {
    min-height: 0;
  }
  body.asterrvn-phone .about-view .terminal {
    --phone-boot-lift: 0px;
    margin-top: 0 !important;
  }
}

/* === PASS 4M: head centerline locked to terminal right edge, 50% visible === */
@media (max-width: 640px) {
  body.asterrvn-phone .about-view .terminal {
    --phone-head-w: clamp(280px, 74vw, 400px);
    --phone-head-right: calc(var(--phone-head-w) * -0.5);
    --phone-head-crop-correction: 0px;
    --phone-head-top: 0px;
    --phone-head-shift-x: 0px;
    --phone-text-lane: 0px;
  }

  body.asterrvn-phone .about-view .terminal img.hero-side-art {
    right: calc(var(--phone-head-right) + var(--phone-head-crop-correction)) !important;
    top: var(--phone-head-top) !important;
    width: var(--phone-head-w) !important;
    transform: translateX(var(--phone-head-shift-x)) !important;
  }

  body.asterrvn-phone .about-view .terminal #termBody.terminal-body {
    padding-right: 12px !important;
  }

  body.asterrvn-phone #termBody .term-line {
    overflow-wrap: normal !important;
    word-break: normal !important;
    max-width: none !important;
  }

  body.asterrvn-phone .about-view .terminal #termBody .term-line[data-edit-key^="boot.profileLines"],
  body.asterrvn-phone .about-view .terminal #termBody .term-line[data-edit-key="boot.toolsLines.0"],
  body.asterrvn-phone .about-view .terminal #termBody .term-line[data-edit-key^="boot.manifesto"],
  body.asterrvn-phone .about-view .terminal #termBody .term-line[data-edit-key="boot.manifestoCommand"] {
    max-width: none !important;
    white-space: pre-wrap !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }
}

/* === PASS 4N: mobile HOME — layer model, raised head, viewport-fixed illusion === */
@media (max-width: 640px) {
  /* Illusion: viewport-centered fixed layer (not terminal-relative) */
  body.asterrvn-phone .about-view > .system-illusion-layer {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
    width: clamp(400px, 162vmax, 1600px) !important;
  }

  /* Terminal stack: base(0) → dividers(1) → head(2) → text/rows(3) → chrome(4) */
  body.asterrvn-phone .about-view .terminal {
    isolation: isolate !important;
    --phone-head-top: clamp(-28px, -5vw, -14px);
  }

  body.asterrvn-phone .about-view .terminal::before {
    z-index: 0 !important;
  }

  body.asterrvn-phone .about-view .terminal #termBody.terminal-body {
    z-index: auto !important;
  }

  body.asterrvn-phone .about-view .terminal img.hero-side-art {
    z-index: 2 !important;
  }

  body.asterrvn-phone .about-view .terminal .terminal-head {
    z-index: 4 !important;
  }

  body.asterrvn-phone #termBody .term-line.divider {
    position: relative !important;
    z-index: 1 !important;
  }

  body.asterrvn-phone #termBody .term-line:not(.divider) {
    position: relative !important;
    z-index: 3 !important;
  }

  body.asterrvn-phone #termBody .folder-list,
  body.asterrvn-phone #termBody .folder-row {
    position: relative !important;
    z-index: 3 !important;
  }
}

/* === GOAL C / PASS 4O: mobile HOME — hero error/glitch windows over ASTERRVN logo === */
@media (max-width: 1024px) {
  body.asterrvn-phone .about-view #hero .err-window,
  body.asterrvn-viewer-narrow .about-view #hero .err-window,
  body.asterrvn-tablet .about-view #hero .err-window {
    display: block !important;
  }
}

@media (max-width: 640px) {
  body.asterrvn-phone .about-view #hero {
    position: relative !important;
    isolation: isolate !important;
    overflow-x: clip !important;
    overflow-y: clip !important;
    z-index: 2 !important;
  }

  body.asterrvn-phone .about-view #hero .logo-tag-mobile-webp {
    position: relative !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  body.asterrvn-phone .about-view #hero .err-window {
    z-index: 5 !important;
    width: min(36vw, 124px) !important;
    max-width: min(36vw, 124px) !important;
    min-width: 0 !important;
    pointer-events: auto !important;
  }

  body.asterrvn-phone .about-view #hero .err-window .err-title {
    font-size: 5px !important;
    padding: 2px 5px !important;
  }

  body.asterrvn-phone .about-view #hero .err-window .err-body {
    font-size: 8px !important;
    padding: 6px 8px !important;
    line-height: 1.35 !important;
  }

  body.asterrvn-phone .about-view #hero .err-window .err-body.en {
    font-size: 7px !important;
  }

  body.asterrvn-phone .about-view #hero .err-window .err-btn {
    font-size: 6px !important;
    padding: 2px 6px !important;
  }
}

/* === PASS 4P: mobile HOME — titlebar black mat + err-window side framing === */
@media (max-width: 640px) {
  body.asterrvn-phone .os-window > .titlebar {
    position: relative !important;
    z-index: 30 !important;
    isolation: isolate !important;
    background-color: #000 !important;
    background-image: none !important;
  }

  body.asterrvn-phone .os-window > .titlebar .tab,
  body.asterrvn-phone .os-window > .titlebar .tab.active,
  body.asterrvn-phone .os-window > .titlebar .lang-switch {
    background-color: #000 !important;
  }

  body.asterrvn-phone .about-view #hero {
    overflow-x: visible !important;
  }

  body.asterrvn-phone .about-view #hero > .err-window {
    width: min(30vw, 108px) !important;
    max-width: min(30vw, 108px) !important;
  }

  body.asterrvn-phone .about-view #hero > .err-window:nth-of-type(4n + 1) {
    left: calc(-1 * min(8vw, 28px)) !important;
    right: auto !important;
    bottom: auto !important;
    top: 8% !important;
    transform: rotate(-1.5deg) !important;
  }

  body.asterrvn-phone .about-view #hero > .err-window:nth-of-type(4n + 2) {
    right: calc(-1 * min(8vw, 28px)) !important;
    left: auto !important;
    bottom: auto !important;
    top: 12% !important;
    transform: rotate(1.5deg) !important;
  }

  body.asterrvn-phone .about-view #hero > .err-window:nth-of-type(4n + 3) {
    left: calc(-1 * min(6vw, 22px)) !important;
    right: auto !important;
    bottom: auto !important;
    top: 24% !important;
    transform: rotate(-1deg) !important;
  }

  body.asterrvn-phone .about-view #hero > .err-window:nth-of-type(4n) {
    right: calc(-1 * min(6vw, 22px)) !important;
    left: auto !important;
    bottom: auto !important;
    top: 20% !important;
    transform: rotate(1deg) !important;
  }
}

/* === PASS 4Q/4R: mobile HOME — unclip err-window; JS rotates one side window === */
@media (max-width: 640px) {
  body.asterrvn-phone .content:has(> .view.active[data-view="about"]) {
    overflow-x: visible !important;
    overflow-y: visible !important;
  }

  body.asterrvn-phone .view.active[data-view="about"] .about-view,
  body.asterrvn-phone .view.active[data-view="about"] .about-view #hero {
    overflow-x: visible !important;
    overflow-y: visible !important;
  }

  body.asterrvn-phone .about-view #hero > .err-window {
    width: min(30vw, 108px) !important;
    max-width: min(30vw, 108px) !important;
    top: 14% !important;
    bottom: auto !important;
  }

  body.asterrvn-phone .about-view #hero > .err-window.is-left {
    left: calc(-1 * min(10vw, 34px)) !important;
    right: auto !important;
    transform: rotate(-1.5deg) !important;
  }

  body.asterrvn-phone .about-view #hero > .err-window.is-right {
    right: calc(-1 * min(10vw, 34px)) !important;
    left: auto !important;
    transform: rotate(1.5deg) !important;
  }
}

/* === PASS 4S: tablet/near-desktop — lift head above terminal mat, text above head === */
@media (min-width: 641px) and (max-width: 1024px) {
  body.asterrvn-tablet .about-view .terminal,
  body.asterrvn-viewer-narrow:not(.asterrvn-phone) .about-view .terminal {
    isolation: isolate !important;
  }

  body.asterrvn-tablet .about-view .terminal #termBody.terminal-body,
  body.asterrvn-viewer-narrow:not(.asterrvn-phone) .about-view .terminal #termBody.terminal-body {
    z-index: auto !important;
  }

  body.asterrvn-tablet .about-view .terminal img.hero-side-art,
  body.asterrvn-viewer-narrow:not(.asterrvn-phone) .about-view .terminal img.hero-side-art {
    z-index: 2 !important;
  }

  body.asterrvn-tablet #termBody .term-line.divider,
  body.asterrvn-viewer-narrow:not(.asterrvn-phone) #termBody .term-line.divider {
    position: relative !important;
    z-index: 1 !important;
  }

  body.asterrvn-tablet #termBody .term-line:not(.divider),
  body.asterrvn-viewer-narrow:not(.asterrvn-phone) #termBody .term-line:not(.divider),
  body.asterrvn-tablet #termBody .folder-list,
  body.asterrvn-tablet #termBody .folder-row,
  body.asterrvn-viewer-narrow:not(.asterrvn-phone) #termBody .folder-list,
  body.asterrvn-viewer-narrow:not(.asterrvn-phone) #termBody .folder-row {
    position: relative !important;
    z-index: 3 !important;
  }
}

/* === PASS 4V: mobile OS chrome — fixed statusbar + all-tab caps + ls divider === */
@media (max-width: 640px) {
  /* Lock shell to viewport; scroll happens inside content row only */
  body.asterrvn-phone .os-window {
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
    grid-template-rows: auto minmax(0, 1fr) 0 !important;
  }

  body.asterrvn-phone .content,
  body.asterrvn-phone #content {
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Stable bottom REC strip: fixed, opaque black, above illusion */
  body.asterrvn-phone .os-window > .statusbar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 25 !important;
    background: #000 !important;
    background-color: #000 !important;
    border-top: 2px solid rgba(255, 255, 255, 0.2) !important;
    min-height: 24px !important;
    box-sizing: border-box !important;
    grid-row: unset !important;
    grid-column: 1 / -1 !important;
  }

  /* Top cap on every tab (not lang-switch); not full titlebar width */
  body.asterrvn-phone .os-window > .titlebar .tab {
    border-top: 1px solid var(--line) !important;
  }

  /* Mobile boot omits pre-ls divider — add upper rule above ls /sections block */
  body.asterrvn-phone #termBody .term-line:has(+ .folder-list) {
    border-top: 1px dotted rgba(255, 255, 255, 0.14) !important;
    margin-top: 6px !important;
    padding-top: 4px !important;
    box-sizing: border-box !important;
  }
}

/* === PASS 4W: early top backing + flush bottom statusbar === */
@media (max-width: 640px) {
  /* html.asterrvn-phone-root is set in <head> before body paint — no boot/tag wait */
  html.asterrvn-phone-root .os-window > .titlebar {
    position: relative !important;
    z-index: 30 !important;
    isolation: isolate !important;
    background-color: #000 !important;
    background-image: none !important;
  }

  html.asterrvn-phone-root .os-window > .titlebar .tab,
  html.asterrvn-phone-root .os-window > .titlebar .tab.active,
  html.asterrvn-phone-root .os-window > .titlebar .lang-switch {
    background-color: #000 !important;
  }

  html.asterrvn-phone-root .os-window > .titlebar .tab {
    border-top: 1px solid var(--line) !important;
  }

  /* PWA shell bottom pad lifts chrome — fixed bar anchors to viewport, not padded shell */
  html.asterrvn-phone-root .os-window {
    padding-bottom: 0 !important;
  }

  /* Flush REC strip to viewport bottom; safe-area black fill below, not lifting content */
  html.asterrvn-phone-root .os-window > .statusbar,
  body.asterrvn-phone .os-window > .statusbar {
    bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    min-height: 24px !important;
    height: 24px !important;
    align-items: center !important;
  }

  html.asterrvn-phone-root .os-window > .statusbar::after,
  body.asterrvn-phone .os-window > .statusbar::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;
    height: env(safe-area-inset-bottom, 0px) !important;
    background: #000 !important;
    pointer-events: none !important;
    z-index: -1 !important;
  }
}

/* === PASS 4Y/4Z: statusbar content inset (REC dot clear of rounded edge) === */
@media (max-width: 640px) {
  html.asterrvn-phone-root .os-window > .statusbar,
  body.asterrvn-phone .os-window > .statusbar {
    padding-left: calc(10px + env(safe-area-inset-left, 0px)) !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }
}

/* === PASS 4AD: safe-area bottom (no root top mask) === */
@media (max-width: 640px) {
  /* Both html+body selectors — override 4W height/padding lock; content at viewport bottom */
  html.asterrvn-phone-root .os-window > .statusbar,
  body.asterrvn-phone .os-window > .statusbar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
    background: #000 !important;
    background-color: #000 !important;
    z-index: 25 !important;
  }

  html.asterrvn-phone-root .os-window > .statusbar::after,
  body.asterrvn-phone .os-window > .statusbar::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;
    height: env(safe-area-inset-bottom, 0px) !important;
    background: #000 !important;
    pointer-events: none !important;
    z-index: -1 !important;
  }
}

/* === PASS 4AH: top safe-area fill + restore statusbar (no translateY) === */
@media (max-width: 640px) {
  html.asterrvn-phone-root .os-window::before,
  body.asterrvn-phone .os-window::before {
    content: "" !important;
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: env(safe-area-inset-top, 0px) !important;
    background: #000 !important;
    pointer-events: none !important;
    z-index: 20 !important;
  }
}

/* === PASS 4AI: restore 4V/4AB-STRICT statusbar safe-area (bottom only) === */
@media (max-width: 640px) {
  html.asterrvn-phone-root .os-window > .statusbar,
  body.asterrvn-phone .os-window > .statusbar {
    transform: none !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 25 !important;
    background: #000 !important;
    background-color: #000 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    min-height: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    height: auto !important;
    max-height: none !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  html.asterrvn-phone-root .os-window > .statusbar::after,
  body.asterrvn-phone .os-window > .statusbar::after {
    display: none !important;
    content: none !important;
  }
}

/* === PASS 4AJ: statusbar underlap home-indicator safe area (bottom only) === */
@media (max-width: 640px) {
  html.asterrvn-phone-root .os-window > .statusbar,
  body.asterrvn-phone .os-window > .statusbar {
    bottom: calc(-1 * env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: 0 !important;
    min-height: 24px !important;
    height: 24px !important;
    max-height: 24px !important;
    transform: none !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 25 !important;
    background: #000 !important;
    background-color: #000 !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  html.asterrvn-phone-root .os-window > .statusbar::after,
  body.asterrvn-phone .os-window > .statusbar::after {
    display: none !important;
    content: none !important;
  }
}

/* === PASS 4AK: restore visible statusbar (revert 4AJ underlap) === */
@media (max-width: 640px) {
  html.asterrvn-phone-root .os-window > .statusbar,
  body.asterrvn-phone .os-window > .statusbar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    padding-bottom: 0 !important;
    transform: none !important;
    background: #000 !important;
    background-color: #000 !important;
    z-index: 25 !important;
    box-sizing: border-box !important;
  }

  html.asterrvn-phone-root .os-window > .statusbar::after,
  body.asterrvn-phone .os-window > .statusbar::after {
    display: none !important;
    content: none !important;
  }
}

/* === PASS 4AL: mobile HOME — section entries match terminal text size === */
@media (max-width: 640px) {
  body.asterrvn-phone .about-view .terminal #termBody .folder-list,
  body.asterrvn-phone .about-view .terminal #termBody .folder-row {
    font-size: inherit !important;
    line-height: inherit !important;
  }

  body.asterrvn-phone .about-view .terminal #termBody .folder-row .name,
  body.asterrvn-phone .about-view .terminal #termBody .folder-row .meta,
  body.asterrvn-phone .about-view .terminal #termBody .folder-row .size,
  body.asterrvn-phone .about-view .terminal #termBody .folder-row .ico {
    font-size: inherit !important;
    line-height: inherit !important;
  }
}

/* === PASS 4AM: bottom statusbar — restore 4V safe-area model (wins over 4AK/4W/4AD) === */
@media (max-width: 640px) {
  html.asterrvn-phone-root .os-window > .statusbar,
  body.asterrvn-phone .os-window > .statusbar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 25 !important;
    background: #000 !important;
    background-color: #000 !important;
    transform: none !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    min-height: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    height: auto !important;
    max-height: none !important;
    box-sizing: border-box !important;
  }

  html.asterrvn-phone-root .os-window > .statusbar::after,
  body.asterrvn-phone .os-window > .statusbar::after {
    display: none !important;
    content: none !important;
  }
}

/* === PASS 4AO: thinner chrome borders on mobile tabs + larger iPad portrait head === */
@media (max-width: 1024px) {
  body.asterrvn-viewer-narrow .os-window > .titlebar .tab,
  body.asterrvn-tablet .os-window > .titlebar .tab,
  body.asterrvn-phone .os-window > .titlebar .tab {
    border-top-color: var(--line-chrome) !important;
    border-right-color: var(--line-chrome) !important;
  }
  body.asterrvn-viewer-narrow .os-window > .titlebar .lang-switch,
  body.asterrvn-tablet .os-window > .titlebar .lang-switch,
  body.asterrvn-phone .os-window > .titlebar .lang-switch {
    border-left-color: var(--line-chrome) !important;
    box-shadow: inset 1px 0 0 var(--line-chrome) !important;
  }
}

/* === PASS 4AU: portrait tablet inherits tablet/landscape head model (no portrait hacks) === */

/* === PASS 4BA / 4BE: HOME layer — HEAD transform + TAG layout (no TAG transform) ============
   head-portrait-editor.js writes baked config to body vars. Scope: tablet/desktop >=641px.
     HEAD : --home-head-edit-x/y/scale → transform on <img.hero-side-art>
     TAG  : --home-tag-layout-x/y/w → position/width on <div.logo-tag-wrap> (PASS 4BE)
   TAG never uses transform/scale/filter/mask on the wrapper — WebKit PWA loses alpha otherwise.
   Scale is width = measured base width × config scale (set in JS). */
@media (min-width: 641px) {
  body.asterrvn-home-transform-applied:not(.asterrvn-phone) .about-view .terminal img.hero-side-art {
    transform: translate(
      calc(var(--phone-head-shift-x, 0px) + var(--home-head-edit-x, 0px)),
      var(--home-head-edit-y, 0px)
    ) scale(var(--home-head-edit-scale, 1)) !important;
    transform-origin: center center !important;
    transition: none !important;
  }
  .about-view .hero .logo-tag-wrap {
    display: block;
    margin: 0 auto;
    background: transparent;
    line-height: 0;
  }
  body.asterrvn-home-transform-applied:not(.asterrvn-phone) .about-view .hero .logo-tag-wrap {
    position: relative;
    left: calc(var(--home-tag-layout-x, 0px) + var(--home-tag-device-x-extra, 0px));
    top: calc(var(--home-tag-layout-y, 0px) + var(--home-tag-device-y-extra, 0px));
    width: var(--home-tag-layout-w, auto);
    margin-left: 0;
    margin-right: 0;
    transform: none !important;
    transition: none !important;
    background: transparent !important;
    background-color: transparent !important;
  }
  /* PASS 4BF/4BG: one visible tag child — wide uses alpha webp (video has matte in WebKit PWA) */
  body.asterrvn-home-transform-applied:not(.asterrvn-phone):not(.asterrvn-viewer-narrow)
    .about-view .hero .logo-tag-wrap > video.logo-gif.logo-tag-video {
    display: none !important;
  }
  body.asterrvn-home-transform-applied:not(.asterrvn-phone):not(.asterrvn-viewer-narrow)
    .about-view .hero .logo-tag-wrap > .logo-tag-mobile-webp {
    display: block !important;
    width: 100%;
    max-width: 100%;
    height: auto !important;
    transform: none !important;
  }
  body.asterrvn-home-transform-applied:not(.asterrvn-phone).asterrvn-viewer-narrow
    .about-view .hero .logo-tag-wrap > video.logo-gif.logo-tag-video {
    display: none !important;
  }
  body.asterrvn-home-transform-applied:not(.asterrvn-phone).asterrvn-viewer-narrow
    .about-view .hero .logo-tag-wrap > .logo-tag-mobile-webp {
    display: block !important;
    width: 100%;
    max-width: 100%;
    height: auto !important;
    transform: none !important;
  }

  /* PASS 4BH: device-specific TAG layout nudge (baked config unchanged) */
  body.asterrvn-home-transform-applied:not(.asterrvn-phone).asterrvn-viewer-narrow
    .about-view .hero .logo-tag-wrap,
  body.asterrvn-home-transform-applied:not(.asterrvn-phone).asterrvn-tablet
    .about-view .hero .logo-tag-wrap,
  body.asterrvn-home-transform-applied:not(.asterrvn-phone).asterrvn-standalone
    .about-view .hero .logo-tag-wrap {
    --home-tag-device-x-extra: -20px;
  }
  body.asterrvn-home-transform-applied:not(.asterrvn-phone).asterrvn-desktop-wide:not(
      .asterrvn-viewer-narrow
    ):not(.asterrvn-standalone)
    .about-view .hero .logo-tag-wrap {
    --home-tag-device-y-extra: 15px;
  }
}

/* PASS 4BH: terminal window controls match tab/+ line-chrome weight */
@media (max-width: 1024px) {
  body.asterrvn-viewer-narrow .about-view .terminal .terminal-window-btn,
  body.asterrvn-tablet .about-view .terminal .terminal-window-btn {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--line-chrome) !important;
    box-shadow: none !important;
  }
  body.asterrvn-viewer-narrow .about-view .terminal .terminal-window-close,
  body.asterrvn-tablet .about-view .terminal .terminal-window-close {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: rgba(255, 51, 112, 0.45) !important;
    box-shadow: none !important;
  }
}
/* PASS 4BI: desktop titlebar controls — lateral separators only (match .tab border-right) */
@media (min-width: 1025px) {
  body.asterrvn-desktop-wide .titlebar .controls {
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: 1px solid var(--line-chrome) !important;
    box-shadow: none !important;
  }
  body.asterrvn-desktop-wide .titlebar .controls button {
    border-top: none !important;
    border-bottom: none !important;
    border-right: none !important;
    border-left: 1px solid var(--line-chrome) !important;
    box-shadow: none !important;
    outline: none !important;
    background-image: none !important;
    filter: none !important;
  }
  body.asterrvn-desktop-wide .titlebar .controls button:first-child {
    border-left: none !important;
  }
  body.asterrvn-desktop-wide .titlebar .controls button::before,
  body.asterrvn-desktop-wide .titlebar .controls button::after {
    content: none !important;
    display: none !important;
    border: none !important;
    box-shadow: none !important;
  }
  /* PASS 4BJ: RU/EN + version — lateral chrome only (match —/□/×) */
  body.asterrvn-desktop-wide .titlebar .lang-switch,
  body.asterrvn-desktop-wide .titlebar .version {
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: 1px solid var(--line-chrome) !important;
    box-shadow: none !important;
    outline: none !important;
    background-image: none !important;
    filter: none !important;
  }
  body.asterrvn-desktop-wide .titlebar .lang-switch::before,
  body.asterrvn-desktop-wide .titlebar .lang-switch::after,
  body.asterrvn-desktop-wide .titlebar .version::before,
  body.asterrvn-desktop-wide .titlebar .version::after {
    content: none !important;
    display: none !important;
    border: none !important;
    box-shadow: none !important;
  }
}

/* === PASS 4BM: desktop browser — profile boot lines above head art seam ===
 * Stray “divider” between var role / var other role was a PNG edge from .hero-side-art
 * (z-index 3) showing through transparent .term-line on #termBody (z-index 2).
 * Tablet/PWA already lift term-lines (PASS 4S); scope here matches desktop browser only. */
@media (min-width: 1025px) {
  body.asterrvn-desktop-wide:not(.asterrvn-standalone)
    .about-view
    .terminal
    #termBody
    .term-line[data-edit-key^="boot.profileLines"] {
    position: relative;
    z-index: 4;
    background-color: #000;
  }
}