/* ============================================================
   DESIGN SERIES — tag accent tokens
   layered on top of style.css's existing :root tokens
   ============================================================ */

:root {
    --tag-time:            #2c5ce6;
    --tag-time-bg:         #eef2fd;
    --tag-money:           #1c8a5c;
    --tag-money-bg:        #eaf6f0;
    --tag-impossibility:       #7c3aed;
    --tag-impossibility-bg:    #f2ecfd;
}

@media (prefers-color-scheme: dark) {
    :root {
        --tag-time:            #6f93f2;
        --tag-time-bg:         #14203f;
        --tag-money:           #4fbf8f;
        --tag-money-bg:        #10261c;
        --tag-impossibility:       #a689f5;
        --tag-impossibility-bg:    #241a3a;
    }
}


.design-tagline {
    font-size:      var(--size-lg);
    font-weight:    var(--weight-light);
    color:          var(--text);
    margin-top:     var(--space-lg);
    margin-bottom:  var(--space-lg);
}



/* ============================================================
   FILTER BAR
   ============================================================ */

.filter-bar {
    display:            flex;
    flex-wrap:           wrap;
    gap:                 var(--space-xs);
    margin-bottom:       var(--space-lg);
}

.filter-chip {
    font-family:         var(--font);
    font-size:           var(--size-sm);
    font-weight:         var(--weight-medium);
    padding:             var(--space-xxs) var(--space-sm);
    border-radius:       999px;
    border:              1.5px solid var(--border);
    background:          var(--bg);
    color:               var(--text-muted);
    cursor:              pointer;
    transition:          all 0.15s ease;
    line-height:         1.8;
}

.filter-chip:hover {
    border-color: var(--text-muted);
    color:        var(--text);
}

.filter-chip[data-filter="time"].active {
    background:   var(--tag-time);
    border-color: var(--tag-time);
    color:        #fff;
}
.filter-chip[data-filter="money"].active {
    background:   var(--tag-money);
    border-color: var(--tag-money);
    color:        #fff;
}
.filter-chip[data-filter="impossibility"].active {
    background:   var(--tag-impossibility);
    border-color: var(--tag-impossibility);
    color:        #fff;
}

/* ============================================================
   POST LIST — mobile-first single column flow
   ============================================================ */

.post-list {
    display:             flex;
    flex-direction:       column;
    gap:                  var(--space-xl);
}

.post {
    display:              flex;
    flex-direction:        column;
    gap:                   var(--space-md);
}

.post[hidden] {
    display: none;
}

.post-image {
    width:                100%;
    aspect-ratio:         1 / 1;
    object-fit:           cover;
    border-radius:        var(--radius);
    background:           var(--bg-subtle);
    margin-bottom:        var(--space-xs);
}

.post-text {
    display:           flex;
    flex-direction:    column;
    gap:               var(--space-md);
}

.post-title {
    font-size:            var(--size-xl);
    font-weight:          var(--weight-semibold);
    line-height:          1.2;
}

.post-title .post-subtitle {
    display:              block;
    font-size:            var(--size-lg);
    font-weight:          var(--weight-light);
    color:                var(--text-muted);
    margin-top:           var(--space-xxs);
}

.post-tags {
    display:              flex;
    flex-wrap:            wrap;
    gap:                  var(--space-xxs);
    margin:               var(--space-xxs) 0 var(--space-xs);
}

.tag {
    font-size:            var(--size-xs);
    font-weight:          var(--weight-medium);
    padding:              0.2rem 0.65rem;
    border-radius:        999px;
    white-space:          nowrap;
}

.tag-time          { color: var(--tag-time);          background: var(--tag-time-bg); }
.tag-money         { color: var(--tag-money);         background: var(--tag-money-bg); }
.tag-impossibility { color: var(--tag-impossibility); background: var(--tag-impossibility-bg); }

.post-body {
    font-size:            var(--size-lg);
    font-weight:          var(--weight-light);
    line-height:          1.6;
    color:                var(--text);
    max-width:            60ch;
}

.post-insight {
    font-size:            var(--size-lg);
    font-style:           italic;
    line-height:          1.6;
    color:                var(--text);
    padding-left:         var(--space-sm);
    border-left:          2px solid var(--border);
    max-width:            60ch;
}

.post + .post {
    padding-top:          var(--space-xl);
    border-top:           1px solid var(--border);
}

/* Slightly wider layout on larger screens: image sits beside text.
   Still a single flow on mobile — this only kicks in above 700px. */
@media (min-width: 700px) {
    .post {
        flex-direction:    row;
        gap:               var(--space-md);
    }
    .post-image {
        width:             240px;
        height:            240px;
        flex:              0 0 240px;
        margin-bottom:     0;
    }
    .post-text {
        display:           flex;
        flex-direction:    column;
        gap:               var(--space-md);
    }
}

/* ============================================================
   BLOG POST TYPOGRAPHY — reusable for every future post
   Wrap article body copy in .post-article and these rules
   apply automatically. Nothing here is post-specific.
   ============================================================ */

.post-article {
    display:              flex;
    flex-direction:       column;
    gap:                  var(--space-sm);
}

.post-article h1 {
    font-size:            var(--size-2xl);
    font-weight:          var(--weight-semibold);
    line-height:          1.2;
    margin-top:           var(--space-md);
}

.post-article h2 {
    font-size:            var(--size-xl);
    font-weight:          var(--weight-semibold);
    line-height:          1.2;
    margin-top:           var(--space-md);
}

.post-article h3 {
    font-size:            var(--size-lg);
    font-weight:          var(--weight-semibold);
    line-height:          1.3;
    margin-top:           var(--space-xs);
}

.post-article h4 {
    font-size:            var(--size-md);
    font-weight:          var(--weight-semibold);
    line-height:          1.3;
    margin-top:           var(--space-xs);
    color:                var(--text-muted);
}

.post-article p {
    font-size:            var(--size-lg);
    font-weight:          var(--weight-light);
    line-height:          1.6;
    color:                var(--text);
    max-width:            60ch;
}

.post-article strong {
    font-weight:          var(--weight-semibold);
}

.post-article em {
    font-style:           italic;
}

.post-article strong em,
.post-article em strong {
    font-weight:          var(--weight-semibold);
    font-style:           italic;
}

.post-article ul,
.post-article ol {
    display:              flex;
    flex-direction:       column;
    padding-left:         var(--space-md);
    max-width:            60ch;
}

.post-article ul {
    list-style:           disc;
}

.post-article ol {
    list-style:           decimal;
}

.post-article li {
    font-size:            var(--size-lg);
    font-weight:          var(--weight-light);
    line-height:          1.6;
    color:                var(--text);
}

.tmj-diagram {
  border-radius: 12px;
  overflow: hidden; /* ensures the SVG content itself is clipped to the rounded corners */
}

/* ============================================================
   QUADRANT WIDGET — the two-axis interactive component
   ============================================================ */

.quadrant-widget {
    background:            var(--bg-subtle);
    border-radius:          calc(var(--radius) * 4);
    padding-bottom:                var(--space-lg);
    margin:                 var(--space-lg) 0;
    display:                flex;
    flex-direction:         column;
}

.quadrant-visual {
    position:               relative;
    width:                  100%;
    aspect-ratio:           1 / 1;
    margin:                 0 auto;
    background-image:       var(--quadrant-img, url('/static/tmj/tmj.svg'));
    background-size:        contain;
    background-position:    center;
    background-repeat:      no-repeat;
}

@media (prefers-color-scheme: dark) {
    .quadrant-visual {
        background-image:   var(--quadrant-img, url('/static/img/tmj-dark.svg'));
    }
}

.quadrant-grid {
    position:               absolute;
    inset:                  0;
    display:                grid;
    grid-template-columns:  1fr 1fr;
    grid-template-rows:     1fr 1fr;
}

.quadrant-cell {
    background:             transparent;
    border:                 none;
    cursor:                 pointer;
    padding:                0;
}

.quadrant-cell:hover {
    background:             color-mix(in srgb, var(--text) 6%, transparent);
}

.quadrant-cell.active {
    background:             color-mix(in srgb, var(--text) 10%, transparent);
}

.quadrant-text {
    margin:                 0 auto;
    padding:                0 1rem;
}

.quadrant-state {
    display:                none;
}

.quadrant-state.active {
    display:                flex;
    flex-direction:         column;
    gap:                    var(--space-xs);
}

/* ============================================================
   DOWNLOAD BUTTON
   ============================================================ */

.btn-download {
    display:                inline-flex;
    align-items:            center;
    justify-content:        center;
    align-self:              flex-start;
    background:              var(--link);
    color:                   #ffffff;
    font-family:             var(--font);
    font-size:               var(--size-sm);
    font-weight:             var(--weight-medium);
    padding:                 var(--space-xs) var(--space-md);
    border-radius:           var(--radius);
    text-decoration:         none;
    margin:                  0 0 var(--space-lg);
    transition:              opacity 0.15s ease;
}

.btn-download:hover {
    opacity:                 0.85;
    color:                   #ffffff;
}