/* ---------- Home Page Styling ---------- */
.welcome-wrap main {
    background-color: #001b47;
}
.welcome-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    padding: 3rem 1.5rem; /* py-12 px-6 */
    background-color: #0ea5e9; /* sea blue */
}

.welcome-card {
    width: 42.813rem; /* ~685px */
    max-width: 100%;
    padding: 2.5rem 2.5rem 2rem; /* pt-10 px-10 pb-8 */
    margin: 0 auto;
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

@media (max-width: 640px) {
    .welcome-card {
        padding-left: 1.75rem;
        padding-right: 1.75rem;
        padding-bottom: 2.5rem;
    }
}

.welcome-card h1 {
    margin: 0;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    line-height: 1.2;
}

/* Allow page logos to be larger when desired */
.logo {
    width: 200px;
    height: auto;
    object-fit: contain;
}

/* ---------- Review Form Styling (legacy base) ---------- */
/* Container */
.rf-wrap {
    margin-top: 1rem;
    display: grid;
    gap: 1rem;
}

/* Topic/question scaffolding */
.topic-wrap .q {
    margin: .25rem 0 .5rem;
    color: #374151;
    font-weight: 600;
    text-align: center;
}

.topic-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
}

.topic-btn {
    padding: .5rem .75rem;
    border: 1px solid #008cfc;
    border-radius: .6rem;
    background: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

    .topic-btn.active, .topic-btn:hover {
        border-color: #008cfc;
        background-color: #008cfc;
        color: #fff;
    }

/* Result card */
.result-card {
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: .9rem;
    background: #fff;
    margin-top: 12px;
}

.lead {
    margin: 0;
    font-weight: 700;
    text-align: center;
}

.hint {
    margin: .25rem 0 .75rem;
    color: #6b7280;
    text-align: center;
}

.review-box {
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: .6rem;
    padding: .75rem;
    resize: vertical;
    font: inherit;
    background: #fff;
}

/* Rows/buttons/links */
.row {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: .75rem;
}

    .row.between {
        justify-content: space-between;
    }

.grow {
    flex: 1 1 auto;
}

.spacer {
    flex: 1 1 auto;
}

.btn {
    padding: .6rem .9rem;
    border-radius: .6rem;
    border: 1px solid #e5e7eb;
    background: #fff;
    cursor: pointer;
    display: inline-block;
    width: auto;
}

    .btn.primary {
        background: #2563eb;
        border-color: #2563eb;
        color: #fff;
    }

.inp {
    width: 100%;
    padding: .6rem .75rem;
    border: 1px solid #e5e7eb;
    border-radius: .6rem;
}

.subtle-link {
    color: #9ca3af;
    text-decoration: none;
    font-size: .9rem;
}

    .subtle-link:hover {
        text-decoration: underline;
    }

    .subtle-link.right {
        margin-left: auto;
    }

.bad-title {
    margin: 0 0 .25rem;
    color: #b91c1c;
    text-align: center;
}

/* ---------- Centered layout & hero ---------- */
.wrap {
    max-width: 1000px;
    margin: 0 auto;
    padding: 28px;
}

.center-70 {
    width: 70vw;
    margin-inline: auto;
    max-width: 900px;
    min-width: 320px;
    background-color: white;
    border-radius: 10px;
}

    .center-70 .review-box, .center-70 .inp {
        width: 100%;
    }

/* Ensure buttons inside center-70 size to their content (override any broad selectors) */
.center-70 .btn {
    display: inline-block !important;
    width: auto !important;
}

/* Right-align action buttons in table rows (Index) */
.table .actions-cell {
    text-align: right;
}

@media (max-width: 640px) {
    .center-70 {
        width: 92vw;
        min-width: 0;
    }
}

.hero {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 12px;
    flex-direction: column;
    text-align: center;
}

.title h1 {
    margin: 0;
    font-size: clamp(1.4rem, 2.5vw, 2rem);
}

.sub {
    margin: .25rem 0 0;
    color: #6b7280;
    text-align: center;
}

/* ---------- Rating display (new tiles) ---------- */
.rating-center {
 display: flex;
 justify-content: center;
 align-items: center;
 gap:16px; /* a bit more horizontal space between emoji tiles */
 flex-wrap: wrap;
 margin:16px0;
}

.emoji-btn {
 appearance: none;
 border:0;
 background: transparent;
 padding:0;
 cursor: pointer;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap:12px; /* increased vertical gap between frame and label */
}

/* Ensure MudButton wrapper doesn't apply hover/background to the whole emoji tile */
.emoji-btn.mud-button-root,
.emoji-btn.mud-button-root:hover,
.emoji-btn.mud-button-root:focus,
.emoji-btn.mud-button-root.mud-button-filled,
.emoji-btn.mud-button-root.mud-button-filled:hover,
.emoji-btn.mud-button-root.mud-button-filled:active {
 background: transparent !important;
 box-shadow: none !important;
 color: inherit !important;
}

.emoji-frame {
 width:96px;
 height:96px;
 background: lightgray;
 border-radius:20px;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: box-shadow .15s ease, transform .05s ease, border-color .15s ease;
 border:1px solid #e5e7eb;
}

.emoji-icon {
 width:75px;
 height:75px;
 display: block;
 border-radius:50%;
}

/* Label under each tile — keep stable color on hover/active */
.emoji-btn .lbl {
 font-weight:600;
 font-size: .95rem;
 color: #111; /* stable color */
 transition: color .15s ease;
}

/* ensure label doesn't change color when hovered/active */
.emoji-btn:hover .lbl,
.emoji-btn:focus-visible .lbl,
.emoji-btn.active .lbl,
.emoji-btn.mud-button-root.mud-button-filled .lbl {
 color: #111 !important;
}

/* hover ring */
.emoji-btn:hover .emoji-frame {
 box-shadow:06px18px rgba(0,0,0,.07);
}
/* active ring */
.emoji-btn.active .emoji-frame {
 outline:2px solid #2563eb;
 outline-offset:2px;
 border-color: transparent;
 background: #eef2ff; /* subtle filled look */
}

/* Remove any outstanding background from mud-button when icon selected */
.emoji-btn.mud-button-root.mud-button-filled,
.emoji-btn.mud-button-root.mud-button-filled:hover,
.emoji-btn.mud-button-root.mud-button-filled:active {
 background: transparent !important;
}

/* ---------- Topic buttons: ensure MudIcon is visible and properly sized ---------- */
.topic-btn {
 padding: .5rem .75rem;
 border:1px solid #008cfc;
 border-radius: .6rem;
 background: #fff;
 cursor: pointer;
 display: inline-flex;
 align-items: center;
 gap: .5rem;
}

.topic-btn .mud-icon-root,
.topic-btn svg {
 margin-right:6px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width:20px;
 height:20px;
 color: inherit; /* inherit color from button so it shows on filled/outlined */
}

/* ensure svg uses currentColor */
.topic-btn .mud-icon-root svg,
.topic-btn svg {
 fill: currentColor !important;
 width:20px;
 height:20px;
}

.topic-btn.active, .topic-btn:hover {
 border-color: #008cfc;
 background-color: #008cfc;
 color: #fff;
}

/* ensure icons inside topic-btn receive white color when active */
.topic-btn.active .mud-icon-root,
.topic-btn.active svg {
 color: #fff !important;
 fill: #fff !important;
}

/* Prevent text selection on buttons (avoid 'highlighted' text after click) */
.emoji-btn, .topic-btn {
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

/* Remove focus outline and avoid applying focus styles to label */
.emoji-btn:focus, .emoji-btn:active, .emoji-btn:focus-visible {
 outline: none;
}

.emoji-btn:focus .lbl, .emoji-btn:active .lbl {
 color: #111 !important;
}

/* Ensure MudIcon inside topic button renders as block and uses currentColor */
.topic-btn .mud-icon-root, .topic-btn .mud-icon-root svg {
 display: inline-block !important;
 width:18px !important;
 height:18px !important;
 vertical-align: middle;
 fill: currentColor !important;
 color: inherit !important;
}

/* Small spacing between frame and label */
.emoji-btn { gap:10px; }

/* If topic icon is hidden due to MudIcon CSS, force visibility when active */
.topic-btn .topic-icon { display: none; }
.topic-btn.active .topic-icon { display: inline-block !important; }

/* ensure svg within .topic-icon also visible */
.topic-btn .topic-icon svg { fill: currentColor !important; }
/* ---------- Dark mode tweaks ---------- */
@media (prefers-color-scheme: dark) {
    .sub {
        color: #9ca3af;
    }

    .emoji-frame, .topic-btn, .result-card, .review-box, .btn, .inp {
        background: #fff;
        border-color: #008cfc;
        color: #008cfc;
    }

    .subtle-link {
        color: #9ca3af;
    }

    .emoji-btn .lbl {
        color: black;
    }

    .emoji-btn:hover .lbl,
    .emoji-btn:focus-visible .lbl,
    .emoji-btn.active .lbl {
        color: black;
    }
}

.linklike {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit; /* match surrounding text */
}

    .linklike.subtle-link { /* reuse your subtle link color/hover */
        text-decoration: none;
    }

        .linklike.subtle-link:hover {
            text-decoration: underline;
        }

.footer-center {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 16px 0;
}

/* remove focus outline for rf-wrap variant */
.no-focus-outline input:focus, .no-focus-outline textarea:focus, .no-focus-outline button:focus {
 outline: none;
 box-shadow: none;
}

/* thumbnail sizing */
.thumb-grid {
 display: grid;
 gap: .5rem;
 grid-template-columns: repeat(2,minmax(0,1fr));
 }

/* Constrain uploaded images used as thumbnails */
.media-thumb {
 width:120px;
 height: auto;
 max-width:100%;
 border:1px solid #e5e7eb;
 border-radius:8px;
}

/* helper to right-align image thumbnails in a column */
.right-align-imgs {
 display: flex;
 justify-content: flex-end;
 align-items: center;
 }