/* Landing page: layout for about / feed / music / projects windows */

/* ---------- About ---------- */

.about { width: 100%; max-width: 620px; margin: 8px auto 0; }

.about-inner { display: flex; gap: 16px; align-items: flex-start; padding: 6px 4px 4px; }

.avatar {
    width: 88px; height: 88px; flex-shrink: 0;
    box-shadow: var(--bevel-in);
    background: linear-gradient(135deg, var(--title-a), var(--desktop));
    padding: 2px;
    display: grid; place-items: center;
}
.avatar span { font: 600 34px/1 var(--font-pixel); color: #fff; text-shadow: 2px 2px 0 rgba(0,0,0,0.4); }
.avatar img { width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }

.about-text h1 { color: var(--title-a); margin-bottom: 2px; }
.headline { font-weight: bold; color: var(--text-muted); margin-bottom: 8px; }

.socials {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
    padding: 10px 0 4px;
}

@media (max-width: 520px) {
    .about-inner { flex-direction: column; align-items: center; text-align: center; }
    .about-text h1 { font-size: 26px; }
}

#about-status { color: #006400; }

/* ---------- Feed ---------- */

.cursor { animation: blink 1s steps(1) infinite; margin-left: -4px; }
@keyframes blink { 50% { opacity: 0; } }

.feed-body { padding: 8px 10px; max-height: 560px; overflow-y: auto; }

.timeline { list-style: none; position: relative; }

.timeline-day {
    font: 600 12px/1 var(--font-pixel);
    color: var(--title-a);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 0 6px;
    border-bottom: 1px dotted var(--shadow);
    margin-bottom: 4px;
}
.timeline-day:first-child { padding-top: 2px; }

.event {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: start;
    padding: 6px 4px 6px 0;
    position: relative;
}
/* vertical rail */
.event::before {
    content: "";
    position: absolute; left: 9px; top: 26px; bottom: -6px;
    width: 2px;
    background: repeating-linear-gradient(var(--shadow) 0 2px, transparent 2px 4px);
}
.event:last-child::before, .event.last-of-day::before { display: none; }

.event-icon {
    width: 20px; height: 20px;
    background: var(--face);
    box-shadow: var(--bevel-out);
    display: grid; place-items: center;
    position: relative; z-index: 1;
}
.event-icon img { width: 14px; height: 14px; }

.event-text { min-width: 0; overflow-wrap: anywhere; }
.event-text a { font-weight: bold; }
.event-detail {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.event-detail code { font-family: var(--font-mono); font-size: 15px; color: #333; }

.event-time {
    font-family: var(--font-mono);
    font-size: 15px;
    line-height: 20px;
    color: var(--shadow);
    white-space: nowrap;
    cursor: help;
}

.diff-easy { color: #00875a; font-weight: bold; }
.diff-medium { color: #b77900; font-weight: bold; }
.diff-hard { color: #c0161f; font-weight: bold; }

.event.new { animation: event-in 900ms ease-out both; }
@keyframes event-in {
    0%   { background: var(--select); color: var(--select-text); transform: translateX(-6px); }
    40%  { background: var(--select); color: var(--select-text); transform: none; }
    100% { background: transparent; }
}

.timeline-loading, .timeline-empty { padding: 20px 4px; text-align: center; color: var(--text-muted); }
.dots::after { content: ""; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

.feed-more { display: flex; justify-content: center; padding-top: 8px; }

.feed-error { background: var(--face); box-shadow: var(--bevel-out); margin: 12px auto; max-width: 380px; padding: 3px; }
.feed-error .dialog { font-size: 12px; }
.feed-error .dialog-actions { display: flex; justify-content: center; padding: 0 0 8px; }

/* ---------- Music (Winamp-ish) ---------- */

.music-body { margin: 4px; }

.player {
    background: #232332;
    box-shadow: var(--bevel-in);
    padding: 8px;
    display: flex;
    gap: 10px;
}
.player-art {
    width: 72px; height: 72px; flex-shrink: 0;
    background: #000;
    box-shadow: inset 1px 1px #000, inset -1px -1px #555;
    padding: 2px;
    display: grid; place-items: center;
}
.player-art img { width: 100%; height: 100%; object-fit: cover; }
.player-art img[src$=".svg"] { width: 40px; height: 40px; image-rendering: pixelated; }

.player-info { min-width: 0; flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }

.lcd {
    background: #000;
    color: #00e000;
    font-family: var(--font-mono);
    font-size: 17px;
    line-height: 1.05;
    padding: 4px 6px;
    box-shadow: inset 1px 1px #000, inset -1px -1px #444;
    text-shadow: 0 0 4px rgba(0, 255, 0, 0.45);
}
.lcd-state { font-size: 13px; color: #9f9; opacity: 0.85; }
.lcd-marquee { overflow: hidden; white-space: nowrap; }
.lcd-marquee span { display: inline-block; }
.lcd-marquee.scroll span { padding-left: 100%; animation: lcd-scroll 12s linear infinite; }
@keyframes lcd-scroll { to { transform: translateX(-100%); } }
.lcd-artist { color: #dada00; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.eq { display: flex; align-items: flex-end; gap: 2px; height: 18px; }
.eq i {
    flex: 1; height: 2px;
    background: linear-gradient(0deg, #00c000 0 60%, #e0e000 60% 85%, #e00000 85%);
    background-size: 100% 18px; background-position: bottom;
}
.player.playing .eq i { animation: eq 0.9s steps(6) infinite alternate; }
.player.playing .eq i:nth-child(3n)   { animation-duration: 0.7s; }
.player.playing .eq i:nth-child(3n+1) { animation-duration: 1.1s; animation-delay: -0.3s; }
.player.playing .eq i:nth-child(4n)   { animation-duration: 0.55s; animation-delay: -0.5s; }
@keyframes eq { 0% { height: 3px; } 100% { height: 18px; } }

.seek {
    height: 8px;
    margin: 6px 0 8px;
    background: var(--window);
    box-shadow: var(--bevel-in);
    padding: 2px;
}
.seek-fill { height: 100%; width: 0; background: var(--title-a); transition: width 1s linear; }

.playlist-head {
    display: flex; justify-content: space-between; align-items: baseline;
    font: bold 11px/1 var(--font-ui);
    padding: 0 2px 4px;
}
.playlist-head a { font-weight: normal; }

.playlist {
    list-style: none;
    background: #000;
    box-shadow: var(--bevel-in);
    padding: 4px 3px;
    max-height: 430px;
    overflow-y: auto;
    font-family: var(--font-mono);
    font-size: 16px;
    line-height: 1.15;
    counter-reset: track;
}
.playlist li {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    gap: 6px;
    padding: 1px 4px;
    color: #00e000;
    counter-increment: track;
}
.playlist li::before { content: counter(track) "."; color: #00a000; text-align: right; }
.playlist li:hover { background: #0000c8; color: #fff; }
.playlist li a { color: inherit; text-decoration: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.playlist li a:hover { text-decoration: underline; }
.playlist li time { color: #7a7a7a; }
.playlist li.playlist-empty { display: block; text-align: center; color: #7a7a7a; }
.playlist li.playlist-empty::before { content: none; }

.sb-icon { width: 12px; height: 12px; vertical-align: -2px; margin-right: 4px; }

/* ---------- Projects ---------- */

.project-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}
@media (max-width: 700px) { .project-grid { grid-template-columns: 1fr; } }
.project {
    position: relative;
    display: flex; gap: 12px;
    padding: 10px 12px 12px;
    height: 100%;
    color: var(--text);
    border: 1px dotted transparent;
}
.project:hover, .project:focus-within {
    background: var(--select);
    color: var(--select-text);
    border-color: #fff;
}
.project:hover .muted, .project:focus-within .muted { color: #dcdcff; }
.project-body { min-width: 0; flex: 1; padding-right: 44px; }
.project h3 { margin: 4px 0 2px; }
.project p { font-size: 12px; margin-bottom: 6px; }
.project-icon { width: 32px; height: 32px; flex-shrink: 0; image-rendering: pixelated; }
img.project-icon[src$=".png"] { image-rendering: auto; }

/* The title link covers the whole card, so the card stays one big click target. */
.project-link { color: inherit; text-decoration: none; }
.project-link::after { content: ""; position: absolute; inset: 0; }
.project-link:hover { text-decoration: underline; }
.project-link:focus-visible { outline: none; }
.project-link:focus-visible::after { outline: 1px dotted #fff; outline-offset: -4px; }

/* Corner actions sit above the stretched link. */
.project-actions {
    position: absolute; top: 8px; right: 8px; z-index: 1;
    display: flex; align-items: center; gap: 4px;
}
.icon-btn {
    width: 24px; height: 24px;
    display: grid; place-items: center;
    background: var(--face);
    box-shadow: var(--bevel-out);
}
.icon-btn:active { box-shadow: var(--bevel-btn-pressed); }
.icon-btn img { width: 14px; height: 14px; }
.icon-btn:focus-visible { outline: 1px dotted var(--text); outline-offset: 2px; }
.external-mark {
    font: bold 18px/1 var(--font-ui);
    width: 20px; text-align: center;
    color: var(--title-a);
}
.project:hover .external-mark, .project:focus-within .external-mark { color: #fff; }

/* Tool tags: rectangular chips, readable on both the white and the selected card. */
.tool-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.tool-tags li {
    font-size: 11px;
    line-height: 1;
    padding: 4px 7px;
    color: var(--text);
    background: var(--face);
    box-shadow: inset -1px -1px var(--shadow), inset 1px 1px var(--hilight);
    white-space: nowrap;
}

.projects .menu-bar { color: var(--text-muted); }

/* ---------- Taskbar extras ---------- */

@media (max-width: 420px) { .tray-copy { display: none; } }

@media (max-width: 820px) {
    .feed-body, .playlist { max-height: none; }
}