/* mk-os.css - maxkesslau.de site styles (footer/terminal, breadcrumb, menu toggle + hovers).
   Upload: /wp-content/uploads/mk-os/mk-os.css (UTF-8). Loaded from misc_options_custom_htmlbottom via
   <link rel="stylesheet" href="...mk-os.css?v=N">. Font by name only: PPNeueMontrealMono-Regular (from Lay).
   Sections:
     1. footer: status bar + terminal + night/glasses (+ shows the footer that the inline critical style hides)
     2. breadcrumb (site title)
     3. menu toggle + pixel grid + menu hovers */

/* ==========================================================================================
   1. FOOTER
   ========================================================================================== */
/* the slim htmlbottom value hides #ctf / #ctf-fx inline until this file is loaded (404 = no unstyled footer) */
html #ctf, html #ctf-fx { display: block; }
/* ---------- tokens ---------- */
#ctf {
    --bg: #fff; --fg: #000; --dim: rgba(0,0,0,.5); --line: #000;
    --a1: #ff4400; --a2: #4400ff; --a3: #ff00ff;
}
html.ctf-night #ctf { --bg: #000; --fg: #fff; --dim: rgba(255,255,255,.55); --line: #fff; }
html.ctf-night { color-scheme: dark; }

/* ---------- page-wide effects: layers sit UNDER the footer, never on body ---------- */
#ctf-fx { position: fixed; inset: 0; z-index: 900; pointer-events: none; }
html.ctf-night #ctf-fx {
    -webkit-backdrop-filter: invert(1) hue-rotate(180deg); backdrop-filter: invert(1) hue-rotate(180deg);
}
html.ctf-glasses #ctf-fx { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
html.ctf-night.ctf-glasses #ctf-fx {
    -webkit-backdrop-filter: invert(1) hue-rotate(180deg) blur(3px); backdrop-filter: invert(1) hue-rotate(180deg) blur(3px);
}
/* media keep their real colours in night mode (double inversion) */
html.ctf-night .lay-content img, html.ctf-night .lay-content video, html.ctf-night .lay-content iframe,
html.ctf-night #lay-project-overlay img, html.ctf-night #lay-project-overlay video {
    filter: invert(1) hue-rotate(180deg);
}

/* ---------- footer bar ---------- */
#ctf {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; box-sizing: border-box;
    background: var(--bg); color: var(--fg); border-top: 1px solid var(--line);
    font: 11px/1.2 "PPNeueMontrealMono-Regular", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .02em; text-transform: uppercase;
    padding-bottom: env(safe-area-inset-bottom);
}
#ctf *, #ctf *::before, #ctf *::after { box-sizing: border-box; }
#ctf [hidden] { display: none !important; }
#ctf-bar {
    display: grid; align-items: center; column-gap: 12px; padding: 6px 12px; white-space: nowrap;
    grid-template-columns: auto auto minmax(0, 1fr) minmax(200px, 340px) auto auto;
}
.ctf-seg { display: flex; align-items: center; min-width: 0; }
#ctf-status { justify-content: center; overflow: hidden; }
#ctf-aether { justify-self: end; }
.ctf-label { color: var(--dim); margin-right: 6px; }
#current-section-id-text-c { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.ctf-glyph { font-size: 1.2em; margin-right: 7px; opacity: .3; transition: opacity .3s, color .3s; }
.ctf-glyph:last-child { margin-right: 0; }
.ctf-glyph.active { opacity: 1; color: var(--a1); }
#aether-bar-c { letter-spacing: -1px; margin-right: 6px; }
#aether-percentage-c { min-width: 4ch; text-align: right; }
.ctf-div { width: 7ch; text-align: center; white-space: pre; color: var(--dim); }

/* prompt */
.ctf-prompt { display: flex; align-items: stretch; border: 1px solid var(--line); min-width: 0; }
.ctf-prompt:focus-within { outline: 1px solid var(--a2); outline-offset: 1px; }
.ctf-ps { display: flex; align-items: center; padding: 0 2px 0 8px; color: var(--a1); font-weight: 700; }
#terminal-input {
    flex: 1; min-width: 0; margin: 0; padding: 5px 8px 5px 4px; border: 0; border-radius: 0; outline: 0;
    background: transparent; color: inherit; caret-color: var(--a1);
    font: inherit; font-size: 12px; text-transform: none; letter-spacing: 0; box-shadow: none; height: auto;
}
#terminal-input::placeholder { color: var(--dim); opacity: 1; }
#ctf button {
    margin: 0; border: 0; border-radius: 0; background: transparent; color: inherit; cursor: pointer;
    font: inherit; letter-spacing: inherit; text-transform: inherit; padding: 0 8px; box-shadow: none;
}
#ctf button:hover, #ctf button:focus-visible { background: var(--fg); color: var(--bg); outline: 0; }
#ctf-term-toggle { border-right: 1px solid var(--line); font-size: 9px; }

/* terminal panel */
#ctf-term {
    /* position:fixed; left / bottom / width are set by place() in the script from the input's bounding rect */
    display: none; position: fixed; left: 0; bottom: 0; width: 360px; max-width: 100vw;
    height: min(300px, 42vh); flex-direction: column;
    background: var(--bg); border: 1px solid var(--line); border-bottom: 0;
}
#ctf-term:not([hidden]) { display: flex; }
#ctf-term[data-dock="bottom"] { height: min(190px, 34vh); border-left: 0; border-right: 0; }
.ctf-term-bar { display: flex; justify-content: space-between; align-items: stretch; border-bottom: 1px solid var(--line); flex: none; }
.ctf-term-bar > span:first-child { padding: 5px 8px; }
.ctf-term-btns { display: flex; }
.ctf-term-btns button { border-left: 1px solid var(--line) !important; }
#ctf-term-out {
    flex: 1; overflow: auto; overscroll-behavior: contain; padding: 8px 10px;
    font-size: 12px; line-height: 1.5; text-transform: none; letter-spacing: 0; white-space: pre-wrap; word-break: break-word;
    scrollbar-width: thin; scrollbar-color: var(--fg) transparent;
}
.ctf-ln.cmd::first-letter { color: var(--a1); font-weight: 700; }
.ctf-ln.dim { color: var(--dim); }
.ctf-ln.err::before { content: "!"; color: var(--a3); font-weight: 700; margin-right: 8px; }
.ctf-ln.art { line-height: 1.1; margin: 2px 0; }
.ctf-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; margin-right: 12px; }
.ctf-link:hover, .ctf-link:focus-visible { background: var(--fg); color: var(--bg); outline: 0; }

/* ---------- tablet: drop the noise ---------- */
@media (max-width: 1024px) {
    #ctf-bar { grid-template-columns: auto minmax(0, 1fr) minmax(180px, 300px) auto; }
    .ctf-div, .ctf-label { display: none; }
}

/* ---------- phone (Lay phone breakpoint: max-width 600px) ---------- */
@media (max-width: 600px) {
    #ctf-bar { grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; padding: 6px 10px; }
    #ctf-glyphs, #ctf-status, #aether-bar-c { display: none; }
    #terminal-input { font-size: 16px; padding: 8px 8px 8px 4px; }
    #ctf-term-toggle { font-size: 12px; padding: 0 12px; }
    #ctf-term, #ctf-term[data-dock="bottom"] { height: min(260px, 45vh); border-left: 0; border-right: 0; }
    #ctf-term-dock { display: none; }
    .ctf-term-bar button, .ctf-term-bar > span:first-child { padding-top: 9px; padding-bottom: 9px; }
}
@media (prefers-reduced-motion: reduce) { .ctf-glyph { transition: none; } }

/* ==========================================================================================
   2. BREADCRUMB (site title)
   ========================================================================================== */
.lay-crumbs { margin-left: 12px; white-space: nowrap; letter-spacing: .02em; }
.lay-crumbs-on > .lay-arrow { display: none !important; }
.lay-crumbs-on > .lay-crumbs { margin-left: 0; }
.lay-crumbs a { color: inherit; text-decoration: none; cursor: pointer; }
.lay-crumbs a.lay-crumb:hover, .lay-crumbs a.lay-crumb:focus-visible { text-decoration: underline; text-underline-offset: 3px; outline: 0; }
.lay-crumbs .lay-crumb-sq { color: var(--crumb-color, #000); }
.lay-crumbs .lay-crumb-sep { opacity: .4; margin: 0 .5em; }
.lay-crumbs .lay-crumb-last { display: inline-block; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; line-height: 1.5; margin: -2px 0; }
@media (max-width: 600px) {
    .lay-crumbs { margin-left: 8px; }
    .lay-crumbs-on > .lay-crumbs { margin-left: 0; }
    .lay-crumbs .lay-crumb-mid { display: none; }
    .lay-crumbs .lay-crumb-last { max-width: calc(100vw - 190px); }
}

/* ==========================================================================================
   3. MENU TOGGLE + PIXEL GRID + MENU HOVERS
   ========================================================================================== */
/* --- toggle button + 3x3 pixel grid (button and cells are created by mk-os.js) --- */
#mk-grid-btn {
    position: fixed; top: 1.5vw; right: 1%; z-index: 40;
    width: 28px; height: 25px; margin: 0; padding: 0;
    border: 0; background: none; cursor: pointer;
    display: grid; place-items: center;
}
html:not(.mk-menu) #mk-grid-btn { display: none; }
#mk-grid-btn:focus-visible { outline: 1px solid #000; outline-offset: 2px; }
#mk-grid { display: grid; grid-template-columns: repeat(3, 4px); grid-auto-rows: 4px; gap: 2px; }
#mk-grid i { background: #000; transition: opacity .2s, transform .25s; }
#mk-grid i[data-on="0"] { opacity: 0; transform: scale(.3); }
#mk-grid.mk-g i, #mk-grid.mk-i i { transition: none; }       /* mk-g: GSAP drives the cells; mk-i: instant change */

/* --- menu open / closed: only once JS has added html.mk-menu (no JS = menu stays visible) --- */
html.mk-menu nav.primary { padding-right: 34px; }             /* pills sit left of the icon */
html.mk-menu .laynav > ul { transition: visibility 0s .35s; }  /* hide only after the close animation */
html.mk-open .laynav > ul { transition-delay: 0s; }
html.mk-menu:not(.mk-open) .laynav { pointer-events: none; }
html.mk-menu:not(.mk-open) .laynav > ul { visibility: hidden; }
html.mk-menu .laynav > ul > li { transition: opacity .25s, transform .3s cubic-bezier(.34, 1.56, .64, 1); }
html.mk-menu:not(.mk-open) .laynav > ul > li { opacity: 0; transform: translateX(24px) scale(.6); }
html.mk-gsap .laynav > ul > li { transition: none; }           /* GSAP staggers the pills instead */

/* phone (<= 600px): the pills stack in a right-aligned column under the icon */
@media (max-width: 600px) {
    #mk-grid-btn { right: 2%; }
    html.mk-menu nav.mobile-nav { padding-top: 32px; }
    html.mk-menu nav.mobile-nav > ul { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
    html.mk-menu nav.mobile-nav > ul > li { margin: 0 !important; }
    html.mk-menu:not(.mk-open) .laynav > ul > li { transform: translateY(-12px) scale(.6); }
}

/* --- hovers (menu-hover v2). a:not(#_) adds ID weight, so these beat Lay's button rules without !important --- */
.laynav a:not(#_)[data-title] {
    border-radius: 13px;      /* = half the pill height: looks like 100px but the radius animates visibly (no snap) */
    transition: border-radius .45s cubic-bezier(.45, 0, .25, 1), background-color .3s, color .3s, border-color .3s, box-shadow .35s;
}
.laynav a:not(#_)[data-title="research"] > span::after {      /* CSS "?" (GSAP version: .mh-q) */
    content: "?"; display: inline-block; max-width: 0; opacity: 0;
    overflow: hidden; vertical-align: top; transition: max-width .3s, opacity .3s;
}
.mh-q, .mh-l { display: inline-block; font-style: normal; }
.mh-q { overflow: hidden; vertical-align: top; width: 0; opacity: 0; }
html.mh-gsap .laynav a:not(#_)[data-title="research"] > span::after { content: none; }

@media (hover: hover) {
    .laynav a:not(#_)[data-title="work"]:hover { border-radius: 0; box-shadow: 3px 3px 0 #000; }
    .laynav a:not(#_)[data-title="research"]:hover > span::after { max-width: 1ch; opacity: 1; }
    .laynav a:not(#_)[data-title="fun"]:hover {
        background-color: #eebbff; color: #4400ff; border-color: #4400ff; box-shadow: 2px 2px 0 #4400ff;
        animation: mh-jelly .5s ease-out, mh-sway 1.4s ease-in-out .5s infinite;
    }
    .laynav a:not(#_)[data-title="fun"]:hover .mh-l { animation: mh-wave .3s ease-in-out calc(var(--d) * .1s) infinite alternate; }
    .laynav a:not(#_):is([data-title="about"], [data-title="music"]):hover { background-color: #000; color: #fff; }
    /* GSAP drives fun (incl. the elastic settle on leave) */
    html.mh-gsap .laynav a:not(#_)[data-title="fun"]:hover,
    html.mh-gsap .laynav a:not(#_)[data-title="fun"]:hover .mh-l { animation: none; }
}
@keyframes mh-jelly { 25% { transform: scale(1.14, .86); } 55% { transform: scale(.95, 1.07); } 80% { transform: scale(1.03, .98); } }
@keyframes mh-sway { 25% { transform: rotate(-2.5deg) translateY(-1px); } 75% { transform: rotate(2.5deg) translateY(1px); } }
@keyframes mh-wave { to { transform: translateY(-3px); } }

/* touch: the same looks while pressed */
@media (hover: none) {
    .laynav a:not(#_)[data-title="work"]:active { border-radius: 0; box-shadow: 3px 3px 0 #000; }
    .laynav a:not(#_)[data-title="research"]:active > span::after { max-width: 1ch; opacity: 1; }
    .laynav a:not(#_)[data-title="fun"]:active { background-color: #eebbff; color: #4400ff; border-color: #4400ff; }
    .laynav a:not(#_):is([data-title="about"], [data-title="music"]):active { background-color: #000; color: #fff; }
}

/* reduced motion: everything instant */
@media (prefers-reduced-motion: reduce) {
    #mk-grid i,
    html.mk-menu .laynav > ul,
    html.mk-menu .laynav > ul > li,
    .laynav a:not(#_)[data-title],
    .laynav a:not(#_) > span::after { transition: none; }
    .laynav a:not(#_)[data-title="fun"]:hover,
    .laynav a:not(#_)[data-title="fun"]:hover .mh-l { animation: none; }
}