/* ==========================================================================
   amigaos.hu - Amiga Workbench 3.1 chrome
   All colours were sampled from assets/Amiga_Workbench_3.1_screenshot.png and
   assets/AmigaOS-3.1.png (see AGENTS.md, section "Design facts").
   Rules: integer pixel multiples only, no gradients on chrome, no rounded
   corners, pixel-art rendered hard.
   ========================================================================== */

@font-face {
    font-family: 'Topaz';
    src: url('fonts/topaz-400.woff2') format('woff2'),
         url('fonts/topaz-400.ttf') format('truetype');
    font-weight: 400 700;   /* the real Topaz has no bold: never fake one */
    font-style: normal;
    font-display: swap;
}

:root {
    /* --- Workbench 4-colour pens --- */
    --wb-gray: #aaaaaa;      /* window + desktop body, 53% of the screenshot */
    --wb-shadow: #868686;    /* shadow pen */
    --wb-white: #ffffff;     /* highlight pen */
    --wb-black: #000000;     /* detail pen */
    --wb-blue: #6e8ebe;      /* active title bar / selection */
    --wb-dark: #404040;      /* mid pen for small print (same value as the radio UI) */

    /* --- desktop (from assets/AmigaOS-3.1.png) --- */
    --desk: #aeaeae;

    /* --- one Amiga pixel, doubled for modern screens --- */
    --px: 2px;

    --chrome: var(--px) solid var(--wb-black);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    background: var(--desk);
    color: var(--wb-black);
    font-family: 'Topaz', 'Silkscreen', 'Courier New', monospace;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    cursor: default;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

img,
svg {
    display: block;
    image-rendering: pixelated;
}


/* ==========================================================================
   Screen: the white screen title bar ("Amiga Workbench ... graphics mem")
   ========================================================================== */

.screen-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 30px;
    padding: 0 var(--px);
    flex: none;
    background: var(--wb-white);
    border: var(--chrome);
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.20);
    font-size: 16px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    user-select: none;
    position: relative;
    z-index: 5;
}

.screen-bar .bar-title {
    flex: none;
}

.screen-bar .bar-memory {
    color: var(--wb-black);
    overflow: hidden;
    text-overflow: ellipsis;
}

.screen-bar .bar-second {
    margin-left: 24px;
}

.screen-bar .bar-gadget {
    margin-left: auto;
    flex: none;
}

@media (max-width: 640px) {
    .screen-bar .bar-memory {
        display: none;
    }
}

/* ==========================================================================
   Desktop: the grey gradient of assets/AmigaOS-3.1.png, rebuilt in CSS
   ========================================================================== */

.desktop {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: clamp(12px, 4vw, 44px);
    overflow: auto;
    background-color: var(--desk);
    background-image:
        /* Workbench dither: 2px checkerboard over everything else */
        conic-gradient(rgba(0, 0, 0, 0.045) 0 25%, transparent 0 50%,
                       rgba(0, 0, 0, 0.045) 0 75%, transparent 0),
        /* key light from the upper left, dark towards the lower right */
        linear-gradient(120deg,
                        rgba(255, 255, 255, 0.10) 0%,
                        rgba(255, 255, 255, 0.00) 42%,
                        rgba(0, 0, 0, 0.06) 70%,
                        rgba(0, 0, 0, 0.16) 100%);
    background-size: 4px 4px, auto;
}


/* ==========================================================================
   Window: border, title bar and the three Workbench gadgets
   ========================================================================== */

.window {
    position: relative;
    z-index: 2;
    width: min(560px, 100%);
    background: var(--wb-gray);
    border: var(--chrome);
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.18);
    margin: auto;              /* keeps the window reachable when it is tall */
}

/* the Workbench window opening wipe: vertical slices, no easing */
@media (prefers-reduced-motion: no-preference) {
    .window {
        animation: wb-open 0.3s steps(9, end) 0.05s 1 normal none;
    }

    @keyframes wb-open {
        from { clip-path: inset(0 50% 0 50%); }
        to   { clip-path: inset(0 0 0 0); }
    }
}

.title-bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 4px;
    min-height: 26px;
    padding: 2px;
    background: var(--wb-gray);
    border-bottom: var(--chrome);
    user-select: none;
}

/* an active window has a blue title bar, an inactive one a grey one */
.window.is-active .title-bar {
    background: var(--wb-blue);
}

.title-text {
    /* Workbench puts the title at the left, straight after the close gadget */
    text-align: left;
    font-size: 16px;
    line-height: 22px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0;
}

/* --- gadgets: 22x22 raised boxes with a black glyph -------------------- */

.gadget {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    flex: none;
    background: var(--wb-gray);
    border: var(--chrome);
    box-shadow: inset 2px 2px 0 var(--wb-white), inset -2px -2px 0 var(--wb-shadow);
    cursor: default;
}

.gadget svg {
    /* 1:1 with the 16x16 viewBoxes, so the glyphs stay hard-edged */
    width: 16px;
    height: 16px;
    fill: var(--wb-black);
}

.gadget-close svg {
    width: 12px;   /* 1:1 with its 12x14 viewBox */
    height: 14px;
}

.gadget-left {
    justify-self: start;
}

.gadget-pair {
    display: flex;
    gap: 4px;
    justify-self: end;
}


/* ==========================================================================
   Window content
   ========================================================================== */

.window-body {
    position: relative;
    --ball-w: clamp(104px, 26%, 160px);
    padding: clamp(16px, 4vw, 28px) clamp(16px, 4vw, 28px)
             calc(var(--ball-w) * 1.125 + 34px);   /* room for the ball */
    box-shadow: inset 2px 2px 0 var(--wb-white), inset -2px -2px 0 var(--wb-shadow);
}

/* the checkered ball, inside the window like a Workbench icon picture */
.ball {
    position: absolute;
    right: clamp(10px, 3vw, 22px);
    bottom: clamp(10px, 3vh, 20px);
    width: var(--ball-w);     /* the 320x360 art: sphere on top, shadow below */
    height: auto;
    image-rendering: auto;    /* a rendered sphere, not pixel art */
    user-select: none;
    pointer-events: none;     /* decoration: the disk stays easy to hit */
}

.kicker {
    margin: 0 0 4px;
    color: var(--wb-dark);
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: 1px;
    /* no text-transform: the owner wrote "AmigaOS 3.1" and means it that way */
}

.site-name {
    margin: 0 0 8px;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 0;
}

.lede {
    margin: 0;
    max-width: 40ch;
    font-size: 16px;
    line-height: 1.5;
}

/* --- the one and only link: a Workbench disk icon with a label ----------- */

.disk-link {
    display: inline-grid;
    justify-items: center;
    width: 220px;
    margin: 28px 0 8px;
    padding: 6px;
    color: var(--wb-black);
    text-decoration: none;
    text-align: center;
}

.disk-icon {
    display: grid;
    place-items: center;
    width: 96px;
    height: 84px;
    padding: 6px;
    background: transparent;
    border: 2px solid transparent;
}

.disk-icon svg {
    width: 72px;
    height: 66px;
    fill: var(--wb-black);
}

.disk-name {
    margin-top: 8px;
    padding: 2px 6px;
    font-size: 16px;
    line-height: 1.25;
}

.disk-note {
    margin-top: 2px;
    color: var(--wb-dark);
    font-size: 16px;
    line-height: 1.25;
    white-space: nowrap;
}

/* Workbench selection: blue behind the icon, reversed label */
.disk-link:hover .disk-icon,
.disk-link:focus-visible .disk-icon {
    background: var(--wb-blue);
    border-color: var(--wb-black);
}

.disk-link:hover .disk-name,
.disk-link:focus-visible .disk-name {
    background: var(--wb-blue);
    color: var(--wb-white);
}

.disk-link:hover .disk-note,
.disk-link:focus-visible .disk-note {
    color: var(--wb-black);
}

.disk-link:active .disk-icon {
    box-shadow: inset 2px 2px 0 var(--wb-black), inset -2px -2px 0 var(--wb-white);
}

.disk-link:focus-visible {
    outline: 2px dotted var(--wb-black);
    outline-offset: 4px;
}

.disk-link:focus:not(:focus-visible) {
    outline: none;
}

/* --- resize gadget in the lower right corner of every WB window -------- */

.corner-gadget {
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 20px;
    height: 20px;
    background-image: repeating-linear-gradient(135deg,
        var(--wb-black) 0 2px, transparent 2px 5px);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    pointer-events: none;
}

/* --- very short viewports: tighten up so nothing has to scroll ---------- */

@media (max-height: 540px) {
    .window-body {
        padding-top: 12px;
        padding-bottom: 26px;
    }

    .site-name {
        font-size: 16px;
        margin-bottom: 4px;
    }

    .disk-link {
        margin-top: 14px;
    }

    .window-body {
        --ball-w: 96px;
    }
}


/* ==========================================================================
   Background layer 1: AmigaOS 3.1 information printed on the wallpaper.
   Translucent type, no window frame. The text itself lives in index.html.
   It is an overlay of the desktop, never a flow child, so it can never push
   the window out of the middle. Small screens get only the shell text.
   ========================================================================== */

.wall-info {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    color: rgba(0, 0, 0, 0.50);
    font-size: 16px;
    line-height: 20px;
}

.wall-mark {
    display: none;          /* shown from 1150px, see below */
    margin: 0;
    line-height: 1;
    color: rgba(0, 0, 0, 0.10);
}

.wall-cli {
    position: absolute;
    left: 16px;
    bottom: 14px;
    width: min(360px, 66vw);
    max-height: 30vh;
    overflow: hidden;
}

.wall-topic {
    display: none;
}

.wall-topic.is-current {
    display: block;
}

/* prefers-reduced-motion: everything at once, clipped by the desktop */
.wall-cli.is-static {
    max-height: 70vh;
}

.wall-line {
    margin: 0;
    min-height: 20px;
    white-space: nowrap;
}

.wall-cmd {
    color: rgba(0, 0, 0, 0.62);
}

.wall-out {
    color: rgba(0, 0, 0, 0.50);   /* answers sit back from the commands */
}

.wall-cursor {
    display: inline-block;
    width: 8px;
    height: 16px;
    margin-left: 2px;
    background: rgba(0, 0, 0, 0.62);
    vertical-align: -2px;
}

.wall-cli.is-typing .wall-cursor {
    animation: wall-blink 1s steps(1, end) infinite;
}

@keyframes wall-blink {
    0%, 50%   { background: rgba(0, 0, 0, 0.62); }
    51%, 100% { background: transparent; }
}

.wall-spec {
    display: none;          /* from 1150px, see below */
    color: rgba(0, 0, 0, 0.44);
}

.wall-spec p {
    margin: 0;
    min-height: 20px;
    white-space: pre;   /* columns are aligned with plain spaces */
    text-align: left;   /* even though the block is right aligned */
}

.wall-h {
    margin: 14px 0 2px;
    color: rgba(0, 0, 0, 0.30);
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* --- 1150px and wider: spread the type over the desktop ---------------- */

@media (min-width: 1150px) {
    .wall-mark {
        display: block;
        position: absolute;
        left: clamp(12px, 4vw, 64px);
        top: clamp(4px, 4vh, 40px);
        font-size: clamp(56px, 10vw, 128px);
        letter-spacing: -2px;
    }

    .wall-cli {
        position: absolute;
        left: clamp(12px, 4.5vw, 72px);
        top: clamp(110px, 30vh, 260px);
        bottom: auto;         /* else base bottom:14px stretches it */
        width: min(420px, 38vw);
        max-height: 40vh;
    }

    .wall-spec {
        display: block;
        position: absolute;
        right: clamp(12px, 4vw, 64px);
        bottom: clamp(96px, 16vh, 150px);
        margin: 0;
        max-width: 44vw;
        text-align: right;
    }

    /* the window stays dead centre: the desktop text is translucent and
       sits behind it, so there is nothing to make room for */
}

@media (min-width: 1400px) {
    .wall-cli {
        top: clamp(140px, 34vh, 300px);
        width: min(440px, 32vw);
    }
}