/* pages.css - extra pages (holidays, guestbook, etc) + wider nav.
   Written to follow whatever seasonal theme is active: colors come from
   currentColor / rgba overlays instead of hard-coded palette values, and the
   explorer's title/status bars are real <header>/<footer> elements so the
   holiday css restyles them for free. */

nav ul {
    flex-wrap: wrap;
}

nav ul li {
    margin: 0 0.8rem;
}

section.wide {
    max-width: 920px;
}

.note {
    font-size: 1rem;
    opacity: 0.8;
}

.btn {
    display: inline-block;
    padding: 6px 18px;
    border: 2px solid currentColor;
    background: rgba(0, 0, 0, 0.12);
    color: inherit;
    font: inherit;
    font-size: 1.1rem;
    cursor: pointer;
    border-radius: 6px;
}

.btn:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* ---------- holiday gallery ---------- */

#preview-bar {
    min-height: 2.2rem;
    margin: 0 0 1rem;
    font-size: 1.2rem;
}

.hg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
}

.hg-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* buttons center their content vertically otherwise */
    padding: 0;
    text-align: left;
    font: inherit;
    color: inherit;
    background: none;
    border: 2px solid currentColor;
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
    height: 100%;
}

.hg-card:hover {
    transform: translateY(-2px);
}

.hg-card.selected {
    outline: 4px solid currentColor;
    outline-offset: 2px;
}

.hg-mock {
    position: relative;
    flex: 0 0 112px;
    height: 112px;
    border-bottom: 2px solid currentColor;
    overflow: hidden;
}

.hg-mock .m-head {
    height: 18px;
    border-bottom: 3px solid;
}

.hg-mock .m-sec {
    position: absolute;
    left: 14px;
    right: 14px;
    top: 34px;
    bottom: -8px;
    border: 1px solid;
    border-radius: 3px;
    padding: 6px 8px;
}

.hg-mock .m-sec i {
    display: block;
    height: 5px;
    margin-bottom: 5px;
    background: currentColor;
    opacity: 0.55;
}

.hg-mock .m-sec i.t {
    width: 40%;
    height: 7px;
    opacity: 1;
}

.hg-mock img {
    position: absolute;
    right: 8px;
    bottom: 6px;
    width: 38px;
    height: 38px;
    object-fit: cover;
    border-radius: 3px;
}

.hg-info {
    padding: 8px 10px 10px;
}

.hg-name {
    display: block;
    font-size: 1.25rem;
    line-height: 1.15;
}

.hg-date {
    display: block;
    margin-top: 3px;
    font-size: 0.95rem;
    opacity: 0.8;
}

.hg-today {
    display: inline-block;
    margin-top: 6px;
    padding: 0 8px;
    font-size: 0.85rem;
    border: 1px solid currentColor;
    border-radius: 999px;
}

/* ---------- junk drawer (faux file explorer) ---------- */

.xp {
    border: 3px solid currentColor;
    border-radius: 4px;
    overflow: hidden;
    font-size: 1.05rem;
}

.xp > header.xp-title {
    padding: 4px 10px;
    text-align: left;
    border-bottom-width: 3px;
    font-size: 1.15rem;
}

.xp-bar {
    display: flex;
    gap: 6px;
    padding: 6px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.6);
    background: rgba(0, 0, 0, 0.08);
}

.xp-bar .btn {
    padding: 2px 10px;
    font-size: 1rem;
    border-width: 1px;
    border-radius: 3px;
}

.xp-bar .btn[disabled] {
    opacity: 0.35;
    cursor: default;
}

.xp-addr {
    flex: 1;
    min-width: 0;
    padding: 2px 8px;
    border: 1px solid currentColor;
    background: rgba(255, 255, 255, 0.35);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1.5;
}

.xp-main {
    display: flex;
    min-height: 280px;
}

.xp-tree {
    flex: 0 0 170px;
    padding: 6px 4px;
    border-right: 1px solid rgba(128, 128, 128, 0.6);
    overflow: auto;
    background: rgba(0, 0, 0, 0.05);
}

.xp-tree ul {
    list-style: none;
    margin: 0;
    padding-left: 14px;
}

.xp-tree > ul {
    padding-left: 0;
}

.xp-tree a {
    display: block;
    padding: 1px 4px;
    color: inherit !important;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.xp-tree a.cur {
    background: rgba(128, 128, 128, 0.4);
}

.xp-list {
    flex: 1;
    min-width: 0;
    overflow: auto;
    background: rgba(255, 255, 255, 0.18);
}

.xp-list table {
    width: 100%;
    border-collapse: collapse;
}

.xp-list th {
    position: sticky;
    top: 0;
    padding: 3px 8px;
    text-align: left;
    font-weight: normal;
    border-bottom: 1px solid rgba(128, 128, 128, 0.8);
    background: rgba(0, 0, 0, 0.12);
}

.xp-list td {
    padding: 2px 8px;
    white-space: nowrap;
}

.xp-list td:first-child {
    width: 100%;
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.xp-list tbody tr {
    cursor: default;
    user-select: none;
}

.xp-list tbody tr.sel {
    outline: 2px dotted currentColor;
    outline-offset: -2px;
    background: rgba(128, 128, 128, 0.35);
}

.xp-empty {
    padding: 28px 14px;
    opacity: 0.7;
}

/* tiny flat icons, drawn in css so there are no image assets to host */
.ico {
    display: inline-block;
    position: relative;
    width: 14px;
    height: 16px;
    margin-right: 8px;
    vertical-align: -3px;
    border: 2px solid currentColor;
    background: rgba(255, 255, 255, 0.5);
}

.ico.folder {
    height: 11px;
    margin-top: 2px;
    background: #f3b313;
    border-radius: 0 2px 2px 2px;
}

.ico.folder::before {
    content: '';
    position: absolute;
    left: -2px;
    top: -6px;
    width: 8px;
    height: 4px;
    border: 2px solid currentColor;
    border-bottom: 0;
    background: #f3b313;
}

.ico.img {
    background: linear-gradient(135deg, #5BCEFA 50%, #7bb661 50%);
}

.ico.file::after {
    content: '';
    position: absolute;
    left: 2px;
    right: 2px;
    top: 4px;
    height: 2px;
    background: currentColor;
    box-shadow: 0 4px 0 currentColor;
}

.xp-viewer {
    border-top: 3px solid currentColor;
    background: rgba(0, 0, 0, 0.08);
}

.xp-viewer[hidden] {
    display: none;
}

.xp-viewer-head {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 4px 10px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.6);
}

.xp-viewer-head strong {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: normal;
}

.xp-viewer-head a {
    color: inherit !important;
}

.xp-viewer pre {
    margin: 0;
    padding: 10px 12px;
    max-height: 340px;
    overflow: auto;
    font-size: 0.9rem;
    line-height: 1.35;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: ui-monospace, Consolas, 'Courier New', monospace;
}

.xp-viewer img {
    display: block;
    max-width: 100%;
    max-height: 340px;
    margin: 10px auto;
}

.xp > footer.xp-status {
    padding: 3px 10px;
    text-align: left;
    border-top-width: 1px;
    font-size: 0.95rem;
}

@media (max-width: 640px) {
    .xp-tree {
        display: none;
    }
    .xp-list th:nth-child(2),
    .xp-list td:nth-child(2),
    .xp-list th:nth-child(3),
    .xp-list td:nth-child(3) {
        display: none;
    }
}

/* ---------- guestbook ---------- */

.gb-entry {
    margin: 0 0 14px;
    padding: 10px 14px;
    border: 1px solid currentColor;
    border-left-width: 6px;
    background: rgba(0, 0, 0, 0.06);
}

.gb-entry .gb-who {
    font-size: 1.25rem;
}

.gb-entry .gb-when {
    margin-left: 8px;
    font-size: 0.95rem;
    opacity: 0.75;
}

.gb-entry p {
    margin: 6px 0 0;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.gb-entry a {
    font-size: 0.95rem;
}

.gb-form label {
    display: block;
    margin: 10px 0 2px;
}

.gb-form input[type="text"],
.gb-form input[type="url"],
.gb-form textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 6px 8px;
    font: inherit;
    color: #201c20;
    background: #fff;
    border: 2px solid currentColor;
    border-radius: 3px;
}

.gb-form textarea {
    min-height: 110px;
    resize: vertical;
}

.gb-form .gb-hp {
    position: absolute;
    left: -9999px;
    height: 0;
    overflow: hidden;
}

.gb-form .btn {
    margin-top: 12px;
}

.gb-thanks {
    padding: 10px 14px;
    margin: 0 0 14px;
    border: 2px solid currentColor;
}

/* ---------- index: all-mods grid ---------- */

.mods-all-heading {
    margin: 1.8rem 0 0.4rem;
}

.mods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
    margin-top: 0.8rem;
}

.mod-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border: 2px solid currentColor;
    border-radius: 4px;
    overflow: hidden;
    height: 100%;
    background: rgba(0, 0, 0, 0.06);
}

.mod-card:hover {
    transform: translateY(-2px);
    background: rgba(0, 0, 0, 0.12);
}

.mod-card-thumb {
    height: 120px;
    overflow: hidden;
    border-bottom: 2px solid currentColor;
    background: #000;
}

.mod-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mod-card-info {
    padding: 8px 10px 10px;
}

.mod-card-title {
    display: block;
    font-size: 1.2rem;
    line-height: 1.15;
}

.mod-card-desc {
    display: block;
    margin-top: 4px;
    font-size: 0.95rem;
    opacity: 0.8;
    line-height: 1.25;
}

/* ---------- index: guestbook teaser ---------- */

.gb-teaser-list {
    margin: 0.6rem 0 1rem;
}

.gb-teaser-entry {
    margin-bottom: 0.6rem;
}

.gb-teaser-entry p {
    margin: 0.25rem 0 0;
}

/* ---------- holidays: permanent current bar ---------- */

.hg-current {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.6rem 1rem;
    padding: 10px 14px;
    margin-bottom: 4px;
    border: 2px solid currentColor;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.1);
}

.hg-current-label {
    font-size: 0.95rem;
    opacity: 0.75;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hg-current-name {
    font-size: 1.35rem;
    font-weight: bold;
}

/* ---------- holidays: season descriptions ---------- */

.hg-desc {
    display: block;
    margin-top: 6px;
    font-size: 0.95rem;
    line-height: 1.3;
    text-wrap: pretty;
}

.hg-current-desc {
    flex-basis: 100%;
    font-size: 1.05rem;
    line-height: 1.3;
}

/* April Fools: the description is stored upside down so that once the theme
   is equipped (which rotates the whole body 180deg) it reads the right way up.
   Same font, just rotated. Turned on per-holiday with "flip": true in holidays.json */
.hg-flip {
    transform: rotate(180deg);
}