/* The MMB BBS Guide */
.guide-wrap { max-width: 1280px; margin: 0 auto; padding: 0 8px 24px; }
.guide-hero { text-align: center; padding: 18px 0 10px; }
.guide-hero h1 { margin: 0 0 4px; font-size: 2em; }
.guide-tagline { color: #777; margin: 0 0 12px; }
.guide-linkbtn { background: none; border: none; color: #2a6f97; cursor: pointer; padding: 0; font-size: 12px; text-decoration: underline; }

.guide-error { background: #fdd; border: 1px solid #d99; color: #a33; padding: 8px 12px; border-radius: 4px; margin: 10px 0; }

.guide-carousel { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.guide-card { border: 1px solid #ddd; border-radius: 6px; overflow: hidden; background: #fff; display: flex; flex-direction: column; text-decoration: none; color: inherit; min-width: 190px; max-width: 240px; }
.guide-card:hover { border-color: #2a6f97; }
.guide-card img { width: 100%; height: 110px; object-fit: cover; display: block; }
.guide-card-body { padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.guide-card-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.guide-card-desc { color: #666; font-size: 12px; }
.guide-card-meta { color: #999; font-size: 11px; }
.guide-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.guide-dot.online { background: #3a3; }
.guide-dot.offline { background: #c33; }

.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 12px 0; }
.guide-empty { color: #888; text-align: center; padding: 22px 0; }

.guide-toolbar { display: flex; justify-content: space-between; align-items: center; margin: 12px 0 4px; }
.guide-toolbar input[type=search] { padding: 5px 8px; min-width: 240px; }
.guide-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; border-bottom: 1px solid #ddd; padding-bottom: 8px; }
.guide-tabs a { padding: 4px 12px; border-radius: 12px; background: #eee; color: #444; text-decoration: none; font-size: 13px; }
.guide-tabs a.active, .guide-tabs a:hover { background: #2a6f97; color: #fff; }
.guide-types { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.guide-chip { padding: 2px 10px; border: 1px solid #ccc; border-radius: 10px; font-size: 11px; color: #555; text-decoration: none; background: #fafafa; }
.guide-chip.active { border-color: #2a6f97; color: #2a6f97; }

.guide-back { display: inline-block; margin: 8px 0; }
.guide-entry-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.guide-entry-title h1 { margin: 6px 0 2px; }
.guide-short { color: #666; }
.guide-meta { color: #888; font-size: 12px; }
.guide-entry-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.guide-sysop-badge { background: #2a6f97; color: #fff; border-radius: 10px; padding: 2px 10px; font-size: 11px; }
.guide-claim-pending { background: #e8a33d; color: #fff; border-radius: 10px; padding: 2px 10px; font-size: 11px; }

.guide-status-row { display: flex; align-items: center; gap: 10px; margin: 10px 0 14px; font-size: 13px; }
.guide-online-badge { border-radius: 10px; padding: 3px 12px; font-weight: bold; font-size: 12px; }
.guide-online-badge.online { background: #dfd; color: #282; }
.guide-online-badge.offline { background: #fdd; color: #a33; }
.guide-online-badge.unknown { background: #eee; color: #777; }
.guide-status-sub { color: #999; font-size: 12px; }

.guide-columns { display: grid; grid-template-columns: 1fr 300px; gap: 14px; }
@media (max-width: 760px) { .guide-columns { grid-template-columns: 1fr; } }
.guide-bbcode { overflow-wrap: anywhere; }
.guide-doors { width: 100%; border-collapse: collapse; }
.guide-doors td { padding: 4px 8px; border-bottom: 1px solid #f0f0f0; }
.guide-genre { text-align: right; }
.guide-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.guide-gallery-item img { width: 100%; height: 110px; object-fit: cover; border-radius: 4px; border: 1px solid #ddd; }
.guide-details { margin: 0; }
.guide-details dt { font-weight: bold; font-size: 12px; color: #666; margin-top: 6px; }
.guide-details dd { margin: 0 0 2px; overflow-wrap: anywhere; }
.guide-reply { font-size: 12px; color: #555; }
.guide-small { font-size: 11px; color: #888; }

/* form */
.guide-field { margin-bottom: 10px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.guide-field label { font-weight: bold; }
.guide-field-row { display: flex; gap: 12px; }
.guide-port { max-width: 130px; }
.guide-door-row { display: flex; gap: 8px; margin-bottom: 6px; align-items: center; }
.guide-checkbox { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.guide-existing-images { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.guide-existing-image img { height: 60px; }
#guide-image-inputs input[type=file] { display: block; margin-bottom: 6px; }
.guide-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; z-index: 9999; cursor: zoom-out; }
.guide-lightbox img { max-width: 94vw; max-height: 94vh; }

/* terminal modal */
.guide-terminal-modal[hidden] { display: none; }
.guide-terminal-modal { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 9998; display: flex; align-items: center; justify-content: center; }
.guide-terminal-box { width: min(860px, 96vw); background: #111; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 6px 30px rgba(0,0,0,.6); }
.guide-terminal-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: #222; color: #ccc; padding: 6px 12px; font-size: 12px; }
.guide-terminal-note { color: #a88; font-size: 11px; }
.guide-terminal { padding: 8px; height: 420px; background: #000; }
.guide-terminal-status { background: #111; color: #9c9; padding: 4px 12px; font-size: 11px; min-height: 18px; }

/* nav */
.guide-nav-item i { margin-right: 4px; }

/* theme-native buttons: accent + icon spacing */
.button.guide-danger { color: #a33; }
.guide-nav-item i, .repo-nav-item i { margin-right: 6px; }

/* online tag on guide cards (overlays repo-card-version ribbon) */
.repo-card-version.guide-online.up { background: rgba(26, 122, 26, 0.9); }
.repo-card-version.guide-online.down { background: rgba(168, 38, 38, 0.9); }

.guide-not-public { color: #a67c00; font-size: 13px; }

/* wizard steps */
.guide-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 16px; }
.guide-step-label { padding: 5px 12px; border: 1px solid #b4bac3; border-radius: 14px; font-size: 0.85em; color: #444; }
.guide-step-label.active { background: #12a3eb; border-color: #0076b1; color: #fff; }
.guide-step-label.done { background: #e2f2fb; border-color: #12a3eb; }

/* image slots */
.guide-image-slot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.guide-image-preview { max-width: 160px; max-height: 110px; border: 1px solid #bbb; border-radius: 4px; }
.guide-existing-image img { max-width: 140px; max-height: 90px; border: 1px solid #bbb; border-radius: 4px; display: block; margin-bottom: 4px; }
.guide-existing-image { font-size: 0.85em; display: inline-block; }

/* door chips on the view page */
.guide-door-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.guide-door-chip { border: 1px solid #b4bac3; border-radius: 4px; padding: 3px 10px; font-size: 0.9em; background: transparent; }
.guide-door-chip em { color: #777; font-style: normal; font-size: 0.85em; }

.guide-form-actions { margin-top: 8px; }

.guide-dd-selects { display: flex; gap: 10px; flex-wrap: wrap; }

/* number inputs match repo-form text inputs */
.repo-form input[type="number"] {
	padding: 5px 7px;
	border: 1px solid #b4bac3;
	border-radius: 3px;
	background: #fff;
	width: 8em;
	max-width: 520px;
	box-sizing: border-box;
}

/* pycode dark palette for guide form fields (overrides repo.css light rules) */
.guide-wrap .repo-form input[type="text"],
.guide-wrap .repo-form input[type="url"],
.guide-wrap .repo-form input[type="search"],
.guide-wrap .repo-form input[type="number"],
.guide-wrap .repo-form textarea {
	background-color: #4E545C;
	border: 1px solid #202225;
	border-radius: 2px;
	color: rgb(189, 189, 189);
	outline: 0;
}
.guide-wrap .repo-form input:focus,
.guide-wrap .repo-form textarea:focus {
	background-color: #565d67;
}
.guide-wrap .repo-form select {
	background-color: #2F3136;
	border-color: #202225;
	color: rgb(189, 189, 189);
}
.guide-wrap .repo-form label { color: rgb(193, 193, 199); }
.guide-wrap .guide-error { color: #ff8c8c; }
.guide-wrap input[type="file"] { color: rgb(189, 189, 189); }

/* pycode: view-page text must be light enough to read on the dark panels */
.guide-wrap .guide-short,
.guide-wrap .guide-meta,
.guide-wrap .guide-status-sub,
.guide-wrap .guide-small,
.guide-wrap .guide-reply {
	color: rgb(193, 193, 199);
}
.guide-wrap .guide-details dt { color: rgb(193, 193, 199); }
.guide-wrap .guide-details dd,
.guide-wrap .guide-bbcode,
.guide-wrap .guide-doors td,
.guide-wrap .guide-door-chip {
	color: rgb(189, 189, 189);
}
.guide-wrap .guide-door-chip em { color: rgb(150, 150, 158); }
.guide-wrap .guide-panel h2 { color: rgb(220, 220, 225); }
.guide-wrap .guide-step-label:not(.active):not(.done) { color: rgb(150, 150, 158); }