/* HazaM Core Service entry point. Public homepage and product directory. */
.portal-preserve-lines { white-space: pre-line; }
.portal-intro-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.portal-site .rich-content p + p { margin-top: 8px; }
.portal-body {
    background-color: #d8dbd2;
    color: #293329;
}

.portal-site {
    --portal-accent: #356348;
    width: min(100%, 1440px);
    min-height: 100vh;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    background-color: #dcded7;
    background-image: radial-gradient(#3b49320b .65px, transparent .65px);
    background-size: 3px 3px;
    border-inline: 1px solid #838d79;
    container-type: inline-size;
}

.portal-site h1, .portal-site h2, .portal-site h3, .portal-site p {
    margin: 0;
}

.portal-site h1 {
    font-size: 30px;
    line-height: 1.2;
    letter-spacing: -.7px;
}

.portal-site h2 { font-size: 21px; line-height: 1.3; }
.portal-site h3 { font-size: 16px; line-height: 1.35; }
.portal-site .small { font-size: 12px; }
.portal-muted { color: #59654e; }
.portal-site a { color: var(--portal-accent); }

.portal-header, .portal-footer {
    background: #333d35;
    color: #eef2e7;
    border: 1px solid #1d2a20;
}

.portal-header {
    justify-content: space-between;
    padding: 17px 28px;
    gap: 16px;
    border-bottom-color: #6b7b67;
}

.portal-header .site-brand {
    color: #eef2e7;
    font-size: 30px;
    letter-spacing: -1px;
}

.portal-header .site-brand-logo {
    width: 44px;
    height: 44px;
    font: 10px Consolas, monospace;
    background: transparent;
    color: #d5ddcc;
    border: 1px solid #b7c1ad;
}

.portal-account, .portal-languages {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.portal-header .account-tools { margin-left: 0; }
.portal-languages { gap: 7px; font: 12px Consolas, monospace; }
.portal-languages a { color: #e1e8d8; }
.portal-languages [aria-current] { text-decoration: none; font-weight: bold; }

.portal-header .account-tools > .site-button,
.portal-header .account-tools > form > .site-button {
    background: #485548;
    color: #eef2e7;
    border-color: #7b8972 #202d21 #202d21 #7b8972;
}

.portal-header dialog { color: #293329; }
.portal-navbar {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 10px 28px;
    background: #c1c7b8;
    border-bottom: 1px solid #8e9982;
}

.portal-site .site-button {
    color: #2d392a;
    background: #dfe3d6;
    border-color: #fafbf4 #818d76 #818d76 #fafbf4;
}

.portal-site .site-button.selected {
    color: #243a22;
    background: #a9b89b;
    border-color: #7a8b6a #e9eedf #e9eedf #7a8b6a;
}

.portal-site .site-button.primary {
    color: #fff;
    background: var(--portal-accent);
    border-color: #819e7d #23472c #23472c #819e7d;
}

.portal-site .unavailable { opacity: .55; cursor: default; }
.portal-main { padding: 28px; display: flex; flex-direction: column; gap: 28px; flex: 1; }
.portal-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; border-bottom: 1px solid #a3ad94; padding-bottom: 24px; }
.portal-intro p { color: #59654e; max-width: 520px; }
.portal-section-heading, .portal-section-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; }
.portal-section-heading { margin-bottom: 15px; }
.portal-section-heading h2 + p { margin-top: 5px; }
.portal-section-foot { margin-top: 12px; }
.portal-carousel-controls { display: flex; align-items: center; gap: 9px; }
.portal-carousel-controls [data-carousel-range] { font: 12px Consolas, monospace; min-width: 64px; text-align: center; }
.portal-site .portal-arrow { font-size: 18px; padding: 4px 12px; }
.portal-carousel-controls button:disabled { opacity: .4; }

/* Only the product strip scrolls sideways; the page never exceeds its viewport. */
.portal-product-track {
    --portal-visible: 3;
    display: flex;
    position: relative;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 9px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: #929f82 #d8decf;
}

.portal-product-track.items-1 { --portal-visible: 1; }
.portal-product-track.items-2 { --portal-visible: 2; }
.portal-product-track.items-3 { --portal-visible: 3; }
.portal-product-card {
    flex: 0 0 calc((100% - (var(--portal-visible) - 1) * 16px) / var(--portal-visible));
    min-width: 0;
    padding: 20px;
    background: #e9ece2;
    border: 1px solid #929d85;
    box-shadow: inset 1px 1px #fff;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.portal-product-card header { display: flex; gap: 12px; align-items: center; }
.portal-product-card header > div { min-width: 0; }
.portal-product-card p { font-size: 13px; flex: 1; overflow-wrap: anywhere; }
.portal-product-logo { width: 56px; height: 56px; flex: 0 0 56px; object-fit: contain; background: #d8dfcc; border: 1px solid #96a582; }
.portal-product-logo.logo-placeholder { display: inline-flex; align-items: center; justify-content: center; font: bold 14px Consolas, monospace; color: #364b2a; }
.portal-product-type { display: block; font: 11px Consolas, monospace; color: #5b684e; letter-spacing: .6px; margin-top: 5px; }
.portal-badges, .portal-card-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.portal-badge { font: 11px Consolas, monospace; border: 1px solid #a7af9a; color: #4e5b43; padding: 4px 6px; background: #dce2d1; }
.portal-badge.stage-beta { color: #86521a; border-color: #c8a36f; background: #f0e1bf; }
.portal-badge.stage-alpha, .portal-badge.stage-pre-alpha { color: #8b3937; border-color: #bf9184; background: #eddbd2; }
.portal-badge.stage-release { color: #275b32; border-color: #8cac78; background: #d3e4c5; }
.portal-servers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 16px; }
.portal-server { display: grid; grid-template-columns: .95fr 1.35fr; border: 1px solid #929d85; background: #e7eade; min-width: 0; }
.portal-server-cover { min-height: 190px; display: grid; place-items: center; padding: 20px; text-align: center; font: bold 19px Consolas, monospace; color: #4f6043; background: repeating-linear-gradient(135deg, #c8d0bf 0, #c8d0bf 12px, #c1cbb7 12px, #c1cbb7 24px); }
.portal-server-copy { display: flex; align-items: flex-start; flex-direction: column; gap: 13px; padding: 23px; }
.portal-server-copy h3 { font-size: 22px; }
.portal-server-copy p { font-size: 13px; }
.portal-server-copy .site-button { margin-top: auto; }
.portal-server-cover.banner-image { position: relative; padding: 0; overflow: hidden; min-height: 240px; }
.banner-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner-position-top img { object-position: center top; }
.banner-position-bottom img { object-position: center bottom; }
.banner-position-left img { object-position: left center; }
.banner-position-right img { object-position: right center; }
.portal-server-cover.banner-widget { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; background: #c9d2bf; }
.banner-widget .banner-logo { width: 96px; height: 96px; object-fit: contain; }
.banner-widget .banner-status, .banner-widget .banner-players { font-size: 14px; font-weight: normal; }
.banner-widget .banner-status.is-online { color: #245c2c; }
.banner-widget .banner-status.is-online::before { content: '● '; }
.banner-widget .banner-address { font: 13px Consolas, monospace; overflow-wrap: anywhere; }
.banner-widget .banner-copy-result { font: 12px Arial, sans-serif; }
.portal-start { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding-top: 20px; border-top: 1px solid #a3ad94; }
.portal-start strong + p { margin-top: 5px; }
.portal-news { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.portal-news article { display: flex; flex-direction: column; gap: 10px; padding: 19px; border: 1px solid #9aa38d; background: #e8ebe1; box-shadow: inset 1px 1px #fff; }
.portal-news article p { font-size: 13px; }
.portal-news h3 a { color: #293329; text-decoration: none; }
.portal-news h3 a:hover { text-decoration: underline; }
.portal-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px; padding: 15px 28px; font-size: 12px; border-top-color: #71816b; }
.portal-footer nav { display: flex; flex-wrap: wrap; gap: 15px; }
.portal-footer a { color: #dfe5d7; }
.portal-catalog-title { display: flex; flex-direction: column; gap: 8px; }
.portal-catalog-filters { display: grid; grid-template-columns: minmax(0, 1fr) 210px auto; align-items: end; gap: 15px; padding: 16px; background: #e4e8db; border: 1px solid #98a58a; box-shadow: inset 1px 1px #fff; }
.portal-catalog-filters label { display: flex; flex-direction: column; gap: 7px; font-size: 12px; margin: 0; }
.portal-catalog-filters input, .portal-catalog-filters select { min-width: 0; width: 100%; padding: 9px 10px; font: 13px Tahoma, Arial, sans-serif; background: #f3f5eb; border: 2px solid; border-color: #7e8a70 #fff #fff #7e8a70; border-radius: 0; color: #26371f; }
.portal-catalog-filters input[type=hidden] { display: none; }
.portal-directory { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start; }
.portal-categories { padding: 16px; background: #e4e8da; border: 1px solid #98a58a; }
.portal-categories h2 { font-size: 15px; margin-bottom: 13px; }
.portal-categories nav { display: flex; flex-direction: column; gap: 7px; }
.portal-categories nav a, .portal-categories nav button { display: flex; align-items: center; justify-content: space-between; text-align: left; gap: 8px; }
.portal-categories .category-count { font: 11px Consolas, monospace; opacity: .8; }
.portal-categories p { margin-top: 20px; border-top: 1px solid #b2bea2; padding-top: 16px; }
.portal-list { min-width: 0; }
.portal-product-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 20px 0; border-top: 1px solid #a9b497; }
.portal-product-row:last-of-type { border-bottom: 1px solid #a9b497; }
.portal-product-row.catalog-featured { border-left: 3px solid #ac8b44; padding-left: 12px; background: #e8e8d770; }
.portal-badge.featured-badge { color: #795d20; border-color: #b69b65; background: #eee5cd; }
.portal-product-summary { min-width: 0; }
.portal-product-summary h3 a { color: #293329; text-decoration: none; }
.portal-product-summary h3 a:hover { text-decoration: underline; }
.portal-product-summary p { font-size: 13px; margin: 7px 0 10px; overflow-wrap: anywhere; }
.portal-row-action { display: flex; align-items: center; flex-direction: column; gap: 8px; }
.portal-pagination { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 22px; font-size: 12px; }
.portal-empty { padding: 24px 18px; border: 1px solid #9ba68d; background: #e7ebde; }
.portal-site [hidden] { display: none !important; }

@container (min-width: 1200px) {
    .portal-product-track { --portal-visible: 4; }
}

@container (max-width: 850px) {
    .portal-product-track[class] { --portal-visible: 2; }
    .portal-product-track.items-1 { --portal-visible: 1; }
    .portal-directory { grid-template-columns: 165px minmax(0, 1fr); gap: 18px; }
    .portal-product-row { grid-template-columns: 45px minmax(0, 1fr); gap: 12px; }
    .portal-product-row .portal-product-logo { width: 45px; height: 45px; }
    .portal-row-action { grid-column: 2; flex-direction: row; justify-content: flex-start; }
}

@container (max-width: 580px) {
    .portal-header, .portal-navbar, .portal-main, .portal-footer { padding-inline: 16px; }
    .portal-header .site-brand { font-size: 27px; }
    .portal-account { gap: 8px; }
    .portal-main { gap: 24px; }
    .portal-intro, .portal-server, .portal-directory, .portal-catalog-filters { grid-template-columns: 1fr; }
    .portal-intro { gap: 16px; }
    .portal-site h1 { font-size: 27px; }
    .portal-product-track[class] { --portal-visible: 1; }
    .portal-categories nav { flex-direction: row; flex-wrap: wrap; }
    .portal-categories p { display: none; }
    .portal-carousel-controls { margin-left: auto; }
    .portal-product-row { padding-block: 19px; }
}

@media (pointer: coarse) {
    .portal-site .site-button { min-height: 44px; }
    .portal-catalog-filters input, .portal-catalog-filters select { font-size: 16px; }
}

.banner-logo.asset-placeholder { display: grid; place-items: center; font: bold 30px monospace; }