/* Thoughts: responsive card grid that opens into a focused reading view. */

/* Override the default flex content-viewport for a block scroll container. */
.thoughts-viewport {
    display: block;
    padding: 2rem var(--content-inset);
    /* Shared reading-column measure: the reader box and the fixed bottom
       controls both size to this so the controls land on the frame's borders. */
    --reader-measure: clamp(68ch, 40vw + 24ch, 96ch);
}

/* --- Search bar --------------------------------------------------------- */
/* The pill stays pinned to the top of the scroller (so it never scrolls out of
   reach) but, like the Work category, carries no full-width backing band: cards
   simply scroll up under the pill and the corner "Thoughts" label (blend-mode),
   rather than dissolving into a painted bar. The pill itself is opaque, so cards
   pass cleanly beneath it. */
.thoughts-search-row {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    pointer-events: none;
}

/* The pill: on narrow screens it is just a search icon that expands into a full
   input — mirroring the Work category's collapsible filter. */
.thoughts-search {
    pointer-events: auto;
    display: flex;
    align-items: center;
    height: 44px;
    max-width: 100%;
    background: var(--bg-color);
    border: 1px solid var(--text-color);
    border-radius: 999px;
    overflow: hidden;
    transition: var(--page-color-transition);
}

.thoughts-search-toggle {
    position: relative;
    flex-shrink: 0;
    width: 42px; /* leaves room for the 1px pill border */
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    border-radius: 50%;
    transition: opacity 0.2s ease;
}

.thoughts-search-toggle:focus-visible {
    outline-offset: -2px;
}

/* Open state: cross-fade the magnifier (search) into an X (close). */
.thoughts-search-toggle .ms-icon {
    position: absolute;
    font-size: 22px;
    transition: opacity 0.2s ease;
}

.thoughts-search-toggle .tg-close { opacity: 0; }
.thoughts-search-toggle[aria-expanded="true"] .tg-open { opacity: 0; }
.thoughts-search-toggle[aria-expanded="true"] .tg-close { opacity: 1; }

.thoughts-search-input {
    flex: 1;
    min-width: 0;
    width: 16rem; /* expanded measure on narrow screens */
    max-width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    color: var(--text-color);
    font-family: var(--font-body);
    font-size: calc((1.1rem) * var(--font-scale));
    padding: 0 1.25rem 0 0.25rem;
    outline: none;
    transition: width 0.4s cubic-bezier(0.2, 0, 0.2, 1),
                padding 0.4s ease, opacity 0.2s ease, var(--page-color-transition);
}

.thoughts-search-input::placeholder {
    color: var(--text-color);
}

.thoughts-search-input:focus-visible {
    outline: 2px dashed var(--text-color);
    outline-offset: -2px;
    border-radius: 2px;
}

/* Collapsed (narrow screens, default): only the icon shows. */
.thoughts-search.collapsed .thoughts-search-input {
    width: 0;
    padding-left: 0;
    padding-right: 0;
    opacity: 0;
    pointer-events: none;
}

/* Wide enough to hold the open bar with room to spare: the pill stays open and
   may run wider (capped at --search-cap, like the Work search). The breakpoint
   is the open bar's width (--search-cap + the toggle) plus 2rem of slack —
   content-inset is a constant 2rem in this range, so a 640px viewport leaves
   exactly 576px of column = the open bar + 2rem. Below it the bar would have
   less than 2rem to spare, so it collapses to the icon. */
@media (min-width: 640px) {
    .thoughts-search .thoughts-search-input,
    .thoughts-search.collapsed .thoughts-search-input {
        width: var(--search-cap);
        padding-left: 0.25rem;
        padding-right: 1.25rem;
        opacity: 1;
        pointer-events: auto;
    }

    /* The bar is permanently open at this width, so the toggle is never a close
       control: keep the magnifier and suppress the X regardless of the
       aria-expanded state (which a resize from a narrow width can leave true). */
    .thoughts-search-toggle[aria-expanded="true"] .tg-open { opacity: 1; }
    .thoughts-search-toggle[aria-expanded="true"] .tg-close { opacity: 0; }
}

/* Narrow screens: the collapsed pill is just the search icon, centred on the
   left content-frame edge (mirroring the Work toggle, which centres on the right
   edge). Expanding grows the pill across the full content width and hides the
   "Thoughts" label so the input has room. */
@media (max-width: 639px) {
    /* While the search bleeds full-width it covers the category close-hitbox,
       which sits above it (z-index 500) and would otherwise swallow taps on the
       bar's right half as a category "Back". Disable it until the search
       collapses again (the label is hidden here anyway). */
    main#nav-grid.active-thoughts:has(.thoughts-search:not(.collapsed)) #center-close-hitbox {
        pointer-events: none;
    }

    /* The active "Thoughts" label sits top-right and the collapsed search icon
       top-left, so they share the top row without overlapping — the search icon
       stays aligned with the label (no extra top clearance). */
    .thoughts-search {
        /* Collapsed: the icon sits inside the content column, its left edge on
           the content-inset line (no gutter bleed). A definite width (not a
           cap) so opening can animate it; flex-shrink:0 keeps it from being
           squeezed. Plain ease — no overshoot — so closing doesn't "squish". */
        width: 44px;
        flex-shrink: 0;
        transition: width 0.4s cubic-bezier(0.2, 0, 0.2, 1),
                    margin-left 0.4s cubic-bezier(0.2, 0, 0.2, 1),
                    var(--page-color-transition);
    }

    /* Expanded: bleed symmetrically into both gutters but stop 1rem short of
       each cell edge. Width = column + both insets − 2rem (1rem per side); the
       negative margin (one inset minus that 1rem) places the left edge 1rem in
       from the cell edge. A *definite* width is what makes it actually reach;
       the earlier max-width only capped a content-sized bar, so it fell short. */
    .thoughts-search:not(.collapsed) {
        width: calc(100% + 2 * var(--content-inset) - 2rem);
        max-width: none;
        margin-left: calc(-1 * var(--content-inset) + 1rem);
    }

    .thoughts-search:not(.collapsed) .thoughts-search-input {
        width: auto; /* flex:1 fills the rest of the full-width bar */
    }

    #cell-thoughts:has(.thoughts-search:not(.collapsed)) .category-trigger .label {
        opacity: 0;
    }
}

/* Both the search bar and grid step aside for the reading view. */
#thoughts-content.reading .thoughts-search-row {
    display: none;
}

/* The "Thoughts" label vanishes while reading so it can't intersect the
   expanded letter. */
#cell-thoughts:has(#thoughts-content.reading) .category-trigger .label {
    opacity: 0;
}

/* --- Card grid ---------------------------------------------------------- */
.thoughts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 1.25rem;
    align-content: start;
}

.thought-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem;
    background: var(--bg-color);
    border: 1px solid var(--text-color);
    color: var(--text-color);
    text-align: left;
    cursor: pointer;
    font-family: var(--font-body);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
    .thought-card:hover {
        transform: translateY(-3px);
    }
}

.thought-card-date {
    font-size: calc((0.8rem) * var(--font-scale));
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.thought-card-title {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: calc((clamp(1.3rem, 1rem + 1.5vw, 1.9rem)) * var(--font-scale));
    line-height: 1.05;
}

.thought-card-snippet {
    font-size: calc((clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem)) * var(--font-scale));
    line-height: 1.4;
}

/* --- Reading view ------------------------------------------------------- */
/* The reader is a lightbox-style overlay: it covers the active Thoughts cell
   (position:fixed resolves against the transformed .category-content, like the
   bottom controls) and blurs the card grid behind it into a hint of the other
   notes — mirroring the Work and Play lightboxes. The letter scrolls inside it. */
.thoughts-viewport .thought-reader {
    position: fixed;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    overflow-x: hidden;
    /* Don't chain over-scroll into the blurred grid behind the overlay. */
    overscroll-behavior: contain;
    /* Side insets line the sheet up with the column; the foot leaves room to
       scroll the sheet's bottom border up onto the Back button (centre at
       2rem + half its 44px height from the bottom). */
    padding: 2rem var(--content-inset) calc(2rem + 22px);
    background: color-mix(in srgb, var(--bg-color) 55%, transparent);
    backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity 0.3s ease, var(--page-color-transition);
}

.thought-reader[hidden] {
    display: none;
}

/* The letter itself: the same solid surface as the collapsed cards, centred on
   the reading measure and tall enough to seat the controls at its foot. */
.thought-reader-sheet {
    width: 100%;
    max-width: var(--reader-measure);
    margin: 0 auto;
    min-height: 100%;
    /* Don't shrink: as a flex item in the column overlay it would otherwise
       collapse to min-height (≈ viewport) for a long article, leaving the text
       spilling out below the bordered box. flex-shrink:0 lets it grow to its
       content so the box wraps the whole letter and the overlay scrolls. */
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-color);
    border: 1px solid var(--text-color);
    padding: clamp(1.5rem, 4vw, 3rem);
    /* Extra room at the foot of the column so the last line clears the fixed
       Back/Share controls that hover over the bottom edge. */
    padding-bottom: calc(clamp(1.5rem, 4vw, 3rem) + 3.5rem);
    opacity: 0;
    transform: translateY(8px);
}

#thoughts-content.reading .thought-reader {
    opacity: 1;
}

#thoughts-content.reading .thought-reader-sheet {
    animation: thought-reader-in 0.3s ease-out forwards;
}

@keyframes thought-reader-in {
    to { opacity: 1; transform: translateY(0); }
}

.thought-reader:focus {
    outline: none;
}

/* The prose grows to fill the column so the controls sit at the bottom edge.
   min-width:0 + overflow-wrap let long unbroken strings (URLs, inline code)
   wrap instead of pushing the sheet wider than its measure. */
.thought-reader-body {
    flex: 1 0 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Back/Share controls, pinned to the bottom of the (active) Thoughts cell so
   they stay fixed while the thought scrolls beneath them — Back at the bottom
   left, the labelled Share pill at the bottom right (mirroring the Play
   lightbox's left chevron and share button). They live outside the scrolling
   reader; the active .category-content carries a transform, so `fixed` resolves
   against that near-fullscreen box rather than the page. */
.thought-reader-controls {
    display: none;
    position: fixed;
    left: var(--content-inset);
    right: var(--content-inset);
    bottom: 2rem;
    /* Match the reader column and centre, so the buttons land on the frame's
       left/right borders rather than the screen edges. */
    max-width: var(--reader-measure);
    margin: 0 auto;
    z-index: 6;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
}

#thoughts-content.reading .thought-reader-controls {
    display: flex;
}

.thought-reader-controls > * {
    pointer-events: auto;
}

/* Solid (non-transparent) buttons, matching the Play section's lightbox
   controls. */
.thought-back,
.thought-share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    background: var(--bg-color);
    border: 1px solid var(--text-color);
    cursor: pointer;
    color: var(--text-color);
    transition: var(--page-color-transition);
}

/* Back is a rounded pill with an icon + a visible "Back" label (shown on every
   screen size), straddling the frame's left border by half its HEIGHT — a
   mirror image of the Share pill on the right. */
.thought-back {
    position: relative;
    gap: 0.5rem;
    padding: 0 1.1rem;
    border-radius: 22px;
    transform: translateX(-22px);
}

.thought-back-label {
    font-family: var(--font-body);
    font-size: calc((1.1rem) * var(--font-scale));
    line-height: 1;
}

/* Share is a rounded pill with an icon + a real text label. It straddles the
   frame's right border by half its HEIGHT (the pill's rounded right cap is
   centred on the border), matching how the Back pill straddles on the left. */
.thought-share {
    position: relative;
    gap: 0.5rem;
    padding: 0 1.1rem;
    border-radius: 22px;
    transform: translateX(22px);
}

.thought-share-label {
    font-family: var(--font-body);
    font-size: calc((1.1rem) * var(--font-scale));
    line-height: 1;
}

.thought-back .ms-icon {
    font-size: 22px;
}

.thought-share .ms-icon {
    font-size: 20px;
    transition: opacity 0.2s ease;
}

.thought-back:focus-visible,
.thought-share:focus-visible {
    outline: 2px dashed var(--text-color);
    outline-offset: 2px;
}

/* Click feedback: briefly swap the share glyph for a checkmark, mirroring the
   Play lightbox share button. */
.thought-share.copied .ms-icon {
    opacity: 0;
}

.thought-share::before {
    content: '✓';
    position: absolute;
    left: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    font-family: Arial, sans-serif;
    font-size: calc((1.1rem) * var(--font-scale));
    line-height: 1;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.thought-share.copied::before {
    opacity: 1;
}

/* --- Prev / next article navigation ------------------------------------- */
/* Chevrons straddling the sheet's left/right edges (like the Work/Play lightbox
   cycle buttons), widening on hover to reveal the adjacent article's headline.
   The band is aligned to the reader column and sits outside the scrolling
   reader, so the chevrons stay put while the letter scrolls. */
.thought-reader-nav {
    display: none;
    position: fixed;
    top: 50%;
    left: var(--content-inset);
    right: var(--content-inset);
    max-width: var(--reader-measure);
    margin: 0 auto;
    transform: translateY(-50%);
    z-index: 6;
    pointer-events: none;
}

/* Desktop only, and only where there's ample room beside the column: the
   chevrons straddle the sheet edges and reveal a headline on hover, which only
   makes sense with a real gutter and a pointer. Hidden on phones/tablets. */
#thoughts-content.reading .thought-reader-nav {
    display: none;
}

@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
    #thoughts-content.reading .thought-reader-nav {
        display: block;
    }
}

.trn-btn {
    position: absolute;
    top: 0;
    display: inline-flex;
    align-items: center;
    height: 44px;
    max-width: 44px;
    padding: 0;
    background: var(--bg-color);
    border: 1px solid var(--text-color);
    border-radius: 22px;
    color: var(--text-color);
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    pointer-events: auto;
    transition: max-width 0.25s ease, var(--page-color-transition);
}

.trn-btn[hidden] { display: none; }

/* The icon keeps a fixed 44px circular slot centred on the sheet's border; the
   pill grows away from the border (prev → right, next → left) as it widens, so
   the icon never shifts. */
.trn-prev { left: 0; transform: translate(-22px, -50%); }
.trn-next { right: 0; transform: translate(22px, -50%); }

.trn-btn .ms-icon {
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.trn-title {
    /* min-width:0 lets the title collapse to nothing at rest, so the icon keeps
       its centred 44px slot (otherwise the title's intrinsic width shoves the
       next chevron's icon against the right edge of its circle). */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-heading);
    font-size: calc((1rem) * var(--font-scale));
    opacity: 0;
    transition: opacity 0.2s ease;
}

.trn-prev .trn-title { padding: 0 1rem 0 0.1rem; }
.trn-next .trn-title { padding: 0 0.1rem 0 1rem; }

/* Desktop / keyboard: widen the pill and fade the headline in. Touch devices
   keep the compact icon-only chevron (still navigates). */
@media (hover: hover) and (pointer: fine) {
    .trn-btn:hover,
    .trn-btn:focus-visible {
        max-width: 20rem;
    }
    .trn-btn:hover .trn-title,
    .trn-btn:focus-visible .trn-title {
        opacity: 1;
    }
}

/* --- Markdown typography ------------------------------------------------ */
.thought-reader-date {
    display: block;
    font-size: calc((0.85rem) * var(--font-scale));
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.thought-reader-title {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: calc((clamp(1.8rem, 1.2rem + 3vw, 3rem)) * var(--font-scale));
    line-height: 1.05;
    margin-bottom: 1.75rem;
}

.thought-reader-body :is(h1, h2, h3) {
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: 1.1;
    margin: 2rem 0 0.85rem;
}

.thought-reader-body h1 { font-size: calc((clamp(1.6rem, 1.2rem + 2vw, 2.2rem)) * var(--font-scale)); }
.thought-reader-body h2 { font-size: calc((clamp(1.4rem, 1.1rem + 1.5vw, 1.9rem)) * var(--font-scale)); }
.thought-reader-body h3 { font-size: calc((clamp(1.2rem, 1rem + 1vw, 1.5rem)) * var(--font-scale)); }

.thought-reader-body p,
.thought-reader-body li {
    font-size: calc((clamp(1rem, 0.95rem + 0.4vw, 1.2rem)) * var(--font-scale));
    line-height: 1.6;
}

.thought-reader-body p {
    margin-bottom: 1.1rem;
}

.thought-reader-body ul,
.thought-reader-body ol {
    margin: 0 0 1.1rem 1.4rem;
}

.thought-reader-body li {
    margin-bottom: 0.4rem;
}

.thought-reader-body a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.thought-reader-body img {
    width: 100%;
    max-width: 600px;
    height: auto;
    display: block;
    border: 1px solid var(--text-color);
    margin: 1.1rem 0;
}

.thought-reader-body strong {
    font-weight: 700;
}

.thought-reader-body em {
    font-style: italic;
}

.thought-reader-body code {
    padding: 0.05em 0.35em;
    border: 1px solid var(--text-color);
}

.thought-reader-body blockquote {
    margin: 0 0 1.1rem;
    padding-left: 1rem;
    border-left: 2px solid var(--text-color);
    font-style: italic;
}