/* ==========================
   GLOBAL
========================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {

    font-family: "Inter", sans-serif;

    background: #F7F4EF;

    color: #2E2E2E;

    min-height: 100vh;
}

button,
input,
textarea {
    font: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

/* ==========================
   PAGE LAYOUT
========================== */

.app-layout {

    display: grid;

    grid-template-columns:
        240px
        minmax(600px, 1fr)
        320px;

    gap: 24px;

    max-width: 1800px;

    margin: 0 auto;

    padding: 24px;

    background: #F7F4EF;

    min-height: 100vh;
}

/* ==========================
   SIDEBAR
========================== */

.sidebar {

    position: sticky;

    top: 24px;

    height: fit-content;

    background: white;

    border: 1px solid #E4DED4;

    border-radius: 16px;

    padding: 24px;
}

.logo {

    font-size: 1.5rem;
    font-weight: 700;

    color: #355E3B;

    margin-bottom: 24px;
}

.menu {

    display: flex;
    flex-direction: column;

    gap: 12px;
}

.menu a {

    text-decoration: none;

    color: #355E3B;

    padding: 12px;

    border-radius: 10px;

    transition: .2s ease;
}

.menu a:hover {

    background: #F7F4EF;
}

/* ==========================
   FEED
========================== */

.feed-column {
    min-width: 0;
}

.feed {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ==========================
   SEARCH
========================== */

.search-container {

    margin-bottom: 20px;
}

.search-input {

    width: 100%;

    padding: 14px 18px;

    border: 1px solid #E4DED4;

    border-radius: 12px;

    font-size: 1rem;

    background: white;
}

/* ==========================
   TOPICS
========================== */

.topic-bar {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

    margin-bottom: 24px;
}

.topic-pill {

    background: white;

    border: 1px solid #E4DED4;

    color: #355E3B;

    padding: 8px 14px;

    border-radius: 999px;

    font-size: .85rem;

    cursor: pointer;
}

/* ==========================
   CARD
========================== */

.olv-card {
    background: white;

    width: 100%;

    padding: 24px;

    border-radius: 16px;

    border: 1px solid #E4DED4;

    box-shadow: 0 2px 8px rgba(0,0,0,.04);

    transition: .2s ease;
}

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

.olv-card {
    position: relative;
}

.card-accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;

    width: 6px;

    border-radius: 16px 0 0 16px;
}

.card-main-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.card-main-link:hover .post-content {
    color: #355E3B;
}

.post-content {
    cursor: pointer;
}

/* ==========================
   HEADER
========================== */

.card-header {
    display: flex;
    justify-content: space-between;
    gap: 24px;
}

.user-section {
    display: flex;
    gap: 16px;
}

.avatar-placeholder {
    width: 56px;
    height: 56px;

    border-radius: 50%;

    background: #F7F4EF;
    border: 2px solid #D9D2C7;

    flex-shrink: 0;
}

.username {
    color: #2E2E2E;

    font-size: 1rem;
    font-weight: 600;

    margin-bottom: 8px;
}

/* ==========================
   BADGES
========================== */

.badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.badge {
    background: #F7F4EF;

    color: #355E3B;

    border: 1px solid #D9D2C7;

    padding: 4px 10px;

    border-radius: 999px;

    font-size: .75rem;
    font-weight: 500;
}

/* =================================
   TRUST INDICATOR
================================= */

.trust-indicator {
    display: flex;
    align-items: center;
    gap: 12px;
}

.trust-pill {
    display: flex;
    align-items: center;
    gap: 4px;

    font-size: 13px;
    font-weight: 600;
    line-height: 1;

    transition: transform 0.15s ease;
}

.trust-pill:hover {
    transform: translateY(-1px);
}

.trust-pill .icon {
    font-size: 14px;
}

.trust-pill .count {
    font-size: 12px;
}

/* Questionable */

.trust-pill--warning {
    color: #F59E0B;
}

/* Trusted */

.trust-pill--trusted {
    color: #22C55E;
}

/* Misleading */

.trust-pill--risk {
    color: #EF4444;
}

/* Awaiting Assessment */

.trust-pill--pending {
    color: #9CA3AF;
}

/* ==========================
   META
========================== */

.post-meta {
    margin-top: 20px;

    display: flex;
    gap: 10px;

    flex-wrap: wrap;
}

.post-type {
    background: #355E3B;

    color: white;

    padding: 6px 14px;

    border-radius: 999px;

    font-size: .8rem;
    font-weight: 600;
}

.lens {
    background: #F7F4EF;

    color: #C46A4A;

    border: 1px solid #E4DED4;

    padding: 6px 12px;

    border-radius: 999px;

    font-size: .8rem;
    font-weight: 500;
}

/* ==========================
   QUESTION CONTENT
========================== */

.post-content {
    margin-top: 24px;

    color: #2E2E2E;

    font-size: 1.25rem;
    font-weight: 600;

    line-height: 1.6;
}

/* ==========================
   ACTION BAR
========================== */

.action-bar {
    margin-top: 28px;

    padding-top: 20px;

    border-top: 1px solid #E4DED4;

    display: flex;
    gap: 12px;

    flex-wrap: wrap;
}

/* ==========================
   EXPANDABLE PANELS
========================== */

.action-panel-container {
    margin-top: 12px;
}

.action-panel {
    display: none;

    gap: 10px;
    flex-wrap: wrap;

    padding: 16px;

    background: #FCFBF8;

    border: 1px solid #E4DED4;

    border-radius: 12px;
}

.action-panel.active {
    display: flex;
}

/* ==========================
   PANEL OPTIONS
========================== */

.panel-option {
    background: white;

    border: 1px solid #E4DED4;

    color: #355E3B;

    padding: 10px 14px;

    border-radius: 10px;

    cursor: pointer;

    transition: .2s ease;

    font-weight: 500;
}

.panel-option:hover {
    background: #F7F4EF;
}

/* ==========================
   BUTTONS
========================== */

.action-btn {
    background: #F7F4EF;

    border: 1px solid #E4DED4;

    color: #355E3B;

    padding: 10px 16px;

    border-radius: 10px;

    cursor: pointer;

    font-weight: 500;

    transition: .2s ease;
}

.action-btn:hover {
    background: #EFE8DD;
}

/* Branch */

.branch-btn {
    background: #355E3B;

    color: white;

    border-color: #355E3B;
}

.branch-btn:hover {
    background: #2C4E31;
}

/* Flag */

.flag-btn {
    background: #FFF8F8;

    color: #A64B4B;

    border-color: #E8C8C8;
}

.flag-btn:hover {
    background: #FCEEEE;
}

/* ==========================
   DROPDOWNS
========================== */

.dropdown {
    position: relative;
}

.dropdown-content {
    position: absolute;

    top: calc(100% + 8px);
    left: 0;

    min-width: 220px;

    background: white;

    border: 1px solid #E4DED4;

    border-radius: 12px;

    overflow: hidden;

    display: none;

    box-shadow: 0 12px 30px rgba(0,0,0,.08);

    z-index: 20;
}

.dropdown-content button {
    width: 100%;

    background: white;

    border: none;

    text-align: left;

    padding: 12px 16px;

    color: #444;

    cursor: pointer;
}

.dropdown-content button:hover {
    background: #F7F4EF;
}

.dropdown.open .dropdown-content {
    display: block;
}

/* ==========================
   MOBILE
========================== */

.trust-section {
    align-items: flex-start;
}

/* ==========================
   TYPE COLORS
========================== */

.type-problem .card-accent {
    background: #B8892E;
}

.type-solution .card-accent {
    background: #2F6F6D;
}

.type-action .card-accent {
    background: #46698C;
}

.post-type.problem {
    background: #B8892E;
}

.post-type.solution {
    background: #2F6F6D;
}

.post-type.action {
    background: #46698C;
}

/* ==========================
   CONTENT STYLES
========================== */

.problem-content {
    margin-top: 24px;
    padding-left: 18px;

    border-left: 4px solid #B8892E;

    font-size: 1.15rem;
    line-height: 1.8;

    color: #2E2E2E;
}

.solution-content {
    margin-top: 24px;
    padding-left: 18px;

    border-left: 4px solid #2F6F6D;

    font-size: 1.15rem;
    line-height: 1.8;

    color: #2E2E2E;
}

.action-content {
    margin-top: 24px;
    padding-left: 18px;

    border-left: 4px solid #46698C;

    font-size: 1.15rem;
    line-height: 1.8;

    color: #2E2E2E;
}

/* ==========================
   RIGHT PANEL
========================== */

.context-column {

    position: sticky;

    top: 24px;

    height: fit-content;
}

.placeholder-panel {

    background: white;

    border: 1px solid #E4DED4;

    border-radius: 16px;

    padding: 24px;
}

.placeholder-panel h3 {

    color: #355E3B;

    margin-bottom: 12px;
}

.placeholder-panel p {

    color: #666;

    line-height: 1.6;
}

@media (max-width: 1200px) {

    .app-layout {
    display: grid;
    grid-template-columns: 220px 1fr 320px;
    gap: 24px;
}

    .context-column {
        display: none;
    }
}

@media (max-width: 768px) {

    .app-layout {

        grid-template-columns: 1fr;
    }

    .sidebar {

        position: relative;
    }
}