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

/* --- Noto Sans, self-hosted ---
   Segoe UI is Microsoft-licensed and has no web redistribution rights, so it
   cannot ship on Pages. Noto Sans is the stand-in: the same humanist skeleton
   7.css already names in --w7-font, so the metrics land close enough that
   nothing reflows when the real face isn't available.

   Committed here rather than pulled from a CDN. Three reasons: no third-party
   request on a personal site, no runtime dependency on Google Fonts staying
   up, and the page renders correctly offline. Variable font, latin subset,
   covers weights 100-900 from one 164 KB file. */
@font-face {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/noto-sans-latin.woff2") format("woff2");
}

/* 'Segoe UI Local' is only bound by assets/css/local-fonts.css, which is not
   linked from index.html. Unresolved on a public load, so the chain skips it.
   9pt is the Windows 7 UI default and the size 7.css renders everything at. */
:root {
    --w7-font: 9pt "Segoe UI Local", "Segoe UI", "SegoeUI", "Noto Sans", Tahoma, Verdana, sans-serif;
}

.hidden {
    display: none !important;
}

html {
    height: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 16px;
    min-height: 100vh;
    min-height: 100dvh;
    background-color: #2e2843;
    background-image:
        radial-gradient(1100px 550px at 75% 15%, rgba(169, 155, 201, 0.45), rgba(169, 155, 201, 0) 60%),
        radial-gradient(900px 500px at 15% 85%, rgba(18, 12, 38, 0.6), rgba(18, 12, 38, 0) 65%),
        radial-gradient(700px 700px at 50% 50%, rgba(120, 100, 180, 0.22), rgba(120, 100, 180, 0) 70%),
        linear-gradient(180deg, #241f38 0%, #2e2843 45%, #4a3d6e 100%);
    font-family: var(--w7-font);
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeSpeed;
    text-size-adjust: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
}

.page {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* 7.css: keep window sizing in one place */
.main-window {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 500px;
}

/* 7.css paints .title-bar-controls as its own translucent white panel
   (#fff3) with a left border and a -1px shadow, which on a glass frame
   reads as a hard rectangular patch sitting on the Aero sheen. Real Win7
   caption buttons sit straight on the glass, so drop the panel and let the
   individual button borders do the separating. */
.title-bar-controls {
    background: transparent;
    border-left: 0;
    box-shadow: none;
}

/* Title-bar controls look normal but are dead: no mouse, no keyboard focus action */
.title-bar-controls .title-btn-dead {
    pointer-events: none;
}

.title-bar-text {
    display: flex;
    align-items: center;
    gap: 6px;
}

.title-bar-text img {
    width: 16px;
    height: 16px;
}

/* Only button icons ignore pointer events, links stay clickable */
.button-row-left button img,
.title-bar-text img,
.welcome-message-container img,
.warning-banner img,
.discord-stat-label img {
    pointer-events: none;
}

img {
    -webkit-user-drag: none;
}

.button-row-right {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 12px;
}

/* Inside the split row both groups sit on the same baseline */
.button-row-split .button-row-right,
.button-row-split .button-row-left {
    margin-top: 0;
}

/* All buttons in the main row share the same height */
.button-row-split button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 23px;
    box-sizing: border-box;
    line-height: 1.2;
    white-space: nowrap;
}

.button-row-split button img {
    flex-shrink: 0;
}

.button-row-left {
    display: flex;
    justify-content: flex-start;
    gap: 6px;
    flex-wrap: wrap;
}

.button-row-split {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.button-row-left button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.welcome-message-container {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
    padding: 10px 0 10px 10px;
}

.welcome-message-container img {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
}

.welcome-message-container p {
    margin: 0;
    line-height: 1.4;
    min-height: 32px;
    display: flex;
    align-items: center;
}

/* The SmartScreen window is narrower than the other windows. */
.warning-window {
    max-width: 440px;
}

/* The landing window carries little content, so it is trimmed to the
   same width as the dialog instead of stretching to 500px. */
.welcome-window {
    max-width: 440px;
}

/* --- Windows Security / SmartScreen dialog ---
   Four stacked bands, like the real SmartScreen window:
     1. .warning-banner          amber gradient headline
     2. .warning-text            plain body copy   (whiter)
     3. .warning-actions         Show details + OK/Cancel
     4. .warning-footer          help link
   Band 2 stays white, bands 3-4 drop to a soft grey. */
.warning-body {
    padding: 0;
    background: #f0f0f0;
    color: #000;
}

/* Keep keyboard focus visible inside the dialog */
.warning-body :focus-visible {
    outline: 1px dotted #000;
    outline-offset: 2px;
}

/* 1 - headline band */
.warning-banner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 16px 16px;
    background:
        radial-gradient(160px 95px at 36px 50%, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 72%),
        linear-gradient(180deg, #f8d572 0%, #f9cb4a 40%, #f7c03c 100%);
    border-bottom: 1px solid #d19a12;
}

.warning-banner img {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    /* thin dark rim so the icon does not bleed into the yellow */
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.85)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}

.warning-banner p {
    margin: 0;
    font-size: 15px;
    line-height: 1.35;
    color: #000;
}

/* 2 - body copy */
.warning-text {
    margin: 0;
    padding: 15px 18px 16px;
    background: #ffffff;
    font-size: 12px;
    line-height: 1.55;
    color: #000;
}

/* 3 - Show details + OK/Cancel */
.warning-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px 12px;
    padding: 11px 18px 12px;
    background: #ebebeb;
    border-top: 1px solid #d6d6d6;
}

.warning-details-toggle {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    /* match the 23px button height so the row reads as one line */
    display: flex;
    align-items: center;
    height: 23px;
}

/* Show details disclosure.
   7.css/98.css/XP.css have no circle-and-chevron control (their only
   expander is the plain triangle on details>summary::before, which we
   switch off here), so the ring and the chevron are drawn by hand to
   match the SmartScreen dialog. <details>/<summary> is kept for the
   open/close state and keyboard behaviour. */
.warning-details-toggle > summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    color: #1a1a1a;
    font-size: 12px;
}

.warning-details-toggle > summary::-webkit-details-marker,
.warning-details-toggle > summary::marker {
    display: none;
}

/* turn off the 7.css triangle */
.warning-details-toggle > summary::before {
    content: none;
}

.disclosure-circle {
    position: relative;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    border: 1px solid #8f8f8f;
    border-radius: 50%;
    background: linear-gradient(180deg, #ffffff 0%, #f2f2f2 45%, #dcdcdc 100%);
    box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(0, 0, 0, 0.1);
}

/* The chevron is drawn from the right+bottom borders of a square, so its
   visual mass does not sit on the box centre: a down arrow reads as too
   low and an up arrow as too high. Nudge each state towards the middle. */
.disclosure-circle::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    height: 5px;
    border-right: 1.5px solid #1f1f1f;
    border-bottom: 1.5px solid #1f1f1f;
    transform: translate(-50%, calc(-50% - 1.2px)) rotate(45deg);
    transition: transform 0.15s ease;
}

.warning-details-toggle[open] .disclosure-circle::after {
    transform: translate(-50%, calc(-50% + 1.2px)) rotate(-135deg);
}

/* Windows keeps the disclosure label black; only the ring darkens. */
.warning-details-toggle > summary:hover {
    color: #1a1a1a;
}

.warning-details-toggle > summary:hover .disclosure-circle {
    border-color: #5a5a5a;
}

.warning-details-toggle > summary:focus-visible {
    outline: 1px dotted #000;
    outline-offset: 2px;
}

.warning-buttons {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    height: 23px;
    gap: 6px;
}

/* 7.css forces display:block and a fixed min-width on every button, which
   leaves the label off-centre. SmartScreen centres it and gives OK and
   Cancel the same width, so both are sized here rather than left to 7.css. */
.warning-buttons button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 66px;
    min-height: 23px;
    padding: 0 12px;
    line-height: 1;
}

.warning-details-panel {
    grid-column: 1 / -1;
    grid-row: 2;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #c8c8c8;
    font-size: 11px;
    line-height: 1.6;
    color: #1a1a1a;
    word-break: break-all;
}

.warning-details-panel[hidden] {
    display: none;
}

.warning-details-row span:first-child {
    display: inline-block;
    min-width: 78px;
    color: #4a4a4a;
}

.warning-details-note {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e0e0e0;
    color: #6b6b6b;
    font-style: italic;
}

/* 4 - help link */
.warning-footer {
    padding: 11px 18px 13px;
    background: #ebebeb;
    border-top: 1px solid #d6d6d6;
}

.warning-link {
    font-size: 12px;
    color: #0645ad;
    text-decoration: underline;
}

.warning-link:hover {
    color: #0b4fc1;
}

/* --- Discord window ---
   A ListBox-style sunken card: the avatar sits in a bordered slot on the
   left, the name and a definition list of stats on the right. */
.discord-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #f0f0f0;
    border: 1px solid #c0c0c0;
    border-radius: 3px;
    box-shadow: inset 0 1px 0 #fff;
}

.discord-avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    /* the original Fruity/Aero Discord icon, kept as-is */
    border-radius: 6px;
    object-fit: contain;
    box-sizing: border-box;
}

.discord-info {
    flex: 1;
    min-width: 0;
}

.discord-name {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 600;
    color: #000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.discord-stats {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
}

.discord-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #000;
}

.discord-stat-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #444;
    min-width: 78px;
}

.discord-stat-label img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.discord-stat dd {
    margin: 0;
    color: #000;
    font-variant-numeric: tabular-nums;
}

.discord-error {
    margin: 12px 0 0;
    padding: 8px 10px;
    background: #fff8e6;
    border: 1px solid #e0c069;
    color: #6b4b00;
    font-size: 11px;
    line-height: 1.5;
}

/* --- About Me window ---
   The topic fieldsets use the GroupBox pattern 7.css documents. */
.about-body {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* The About window holds the most content, so on short viewports the
       body scrolls inside the frame instead of pushing the whole page.
       24px body padding + ~28px title bar + ~8px frame all come off the
       viewport before the content box gets a height. */
    max-height: calc(100dvh - 60px);
    overflow-y: auto;
}

/* 7.css leaves fieldsets with margin-bottom:9px, which is what opens the
   8px seam between the stacked GroupBoxes. Zero both margins and pull the
   boxes together by their own 1px border so the rules read as one stack. */
.about-body > fieldset {
    margin: 0;
}

.about-body > fieldset + fieldset {
    margin-top: -1px;
}

/* Keep the Back button off the last GroupBox. */
.about-body > .button-row-right {
    margin-top: 12px;
}

/* 7.css gives paragraphs generous margins; inside a GroupBox the box
   itself already provides the spacing. */
.about-body fieldset > p {
    margin: 0;
}

/* Plain centred icon row, no panel behind it. */
.languages-grid {
    display: flex;
    gap: 15px;
    padding: 12px 0 2px;
    justify-content: center;
    flex-wrap: wrap;
}

.language-icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
    transition: opacity 0.2s;
}

.language-icon-link:hover {
    opacity: 1;
}

.language-icon-link img {
    width: 48px;
    height: 48px;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 5;
}

@media (max-width: 520px) {
    /* Stay vertically centred like the desktop; flex-start was pushing the
       window to the top of the phone screen. */
    body {
        padding: 12px;
        align-items: center;
    }

    /* Match the desktop row: About Me stays hard right against
       GitHub/Discord on the left. The three buttons fit down to ~320px,
       and flex-wrap is kept as a safety net for very narrow screens. */
    .button-row-split {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        row-gap: 8px;
        column-gap: 6px;
        flex-wrap: wrap;
    }

    .button-row-split .button-row-left,
    .button-row-split .button-row-right {
        margin-top: 0;
    }

    /* Keep Show details level with OK/Cancel on one line, exactly like
       the desktop. Only the details panel drops below when expanded. */
    .warning-actions {
        grid-template-columns: 1fr auto;
    }

    .warning-details-toggle {
        grid-column: 1;
        grid-row: 1;
    }

    .warning-buttons {
        grid-column: 2;
        grid-row: 1;
        justify-content: flex-end;
    }

    .warning-details-panel {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    /* Keep the type at desktop metrics. Phones ship larger default text
       sizes, which makes the window look like a modern, high-DPI app
       rather than the chunky 7.css look. */
    body {
        font-size: 12px;
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
    }

    body p,
    .discord-stats,
    .discord-name,
    .warning-text,
    .warning-banner p,
    .warning-footer .warning-link,
    .warning-details-toggle > summary {
        font-size: 12px;
    }
}