/* Árvore de percursos do leitor — Minhas Tramas */
.reader-tramas-page { margin: 1.5rem 0 2.5rem; }
.reader-tramas-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.reader-tramas-title { margin: 0 0 .25rem; font-family: var(--ff-heading, Montserrat, sans-serif); font-size: 2.45rem; font-weight: 200; line-height: 1.1; color: #182235; }
.reader-tramas-subtitle { margin: 0; color: #718096; font-size: .92rem; }
.reader-tramas-summary { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: .75rem; }
.reader-tramas-summary span { display: inline-flex; align-items: center; min-height: 28px; padding: 0 .72rem; border: 1px solid #e0e7ef; border-radius: 999px; background: #fff; color: #586679; font-size: .75rem; }
.reader-tramas-controls { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.reader-tramas-search { position: relative; min-width: 280px; }
.reader-tramas-search input { width: 100%; height: 42px; padding: 0 1rem 0 2.55rem; border: 1px solid #dce4ed; border-radius: 999px; background: #fff; color: #172033; font: inherit; box-shadow: 0 4px 14px rgba(15, 23, 42, .04); }
.reader-tramas-search::before { content: "⌕"; position: absolute; left: 1rem; top: 50%; transform: translateY(-53%); color: #718096; font-size: 1.25rem; pointer-events: none; }
.reader-tramas-search input:focus { outline: 3px solid rgba(44, 82, 130, .13); border-color: #7695b8; }
.reader-tramas-global-button { height: 38px; padding: 0 .9rem; border: 1px solid #dce4ed; border-radius: 999px; background: #fff; color: #42526a; font: inherit; font-size: .78rem; cursor: pointer; }
.reader-tramas-global-button:hover { background: #f5f8fb; }
.reader-tramas-no-results { display: none; padding: 3rem 1rem; text-align: center; color: #718096; }
.reader-tramas-no-results.is-visible { display: block; }

.reader-trama-story { margin-bottom: 1rem; border: 1px solid #e1e7ee; border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(15, 23, 42, .05); overflow: hidden; }
.reader-trama-story[hidden] { display: none; }
.reader-trama-story-summary { list-style: none; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto 28px; align-items: center; gap: .9rem; min-height: 82px; padding: .75rem 1rem; cursor: pointer; background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%); }
.reader-trama-story-summary::-webkit-details-marker { display: none; }
.reader-trama-story-summary:hover { background: #f8fafc; }
.reader-trama-story-summary:focus-visible { outline: 3px solid rgba(44, 82, 130, .18); outline-offset: -3px; }
.reader-trama-cover { width: 58px; height: 58px; border-radius: 11px; object-fit: cover; background: #edf2f7; }
.reader-trama-story-copy { min-width: 0; display: grid; gap: .2rem; }
.reader-trama-story-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--ff-heading, Montserrat, sans-serif); font-size: 1.28rem; font-weight: 300; color: #162033; }
.reader-trama-story-copy small { color: #7b8797; font-size: .78rem; }
.reader-trama-story-stats { display: grid; justify-items: end; gap: .2rem; color: #4d5b6e; font-size: .78rem; }
.reader-trama-story-stats small { color: #8a96a6; font-size: .7rem; }
.reader-trama-story-chevron { color: #627186; font-size: 1.25rem; transition: transform .2s ease; }
.reader-trama-story[open] .reader-trama-story-chevron { transform: rotate(180deg); }
.reader-trama-story-body { padding: 1rem 1.1rem 1.3rem; border-top: 1px solid #edf1f5; background: #fbfcfd; }
.reader-trama-story-toolbar { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.reader-trama-story-notes { color: #758194; font-size: .76rem; }
.reader-trama-consolidated { display: inline-flex; align-items: center; min-height: 28px; padding: 0 .7rem; border-radius: 999px; background: #eef4fb; color: #355f8a; }
.reader-trama-story-actions { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.reader-trama-tool { min-height: 34px; padding: 0 .72rem; border: 1px solid #dbe3eb; border-radius: 999px; background: #fff; color: #516075; font: inherit; font-size: .72rem; cursor: pointer; }
.reader-trama-tool:hover { background: #f3f6f9; }
.reader-trama-tree-viewport { overflow-x: auto; padding: .25rem .2rem .4rem; }

.reader-trama-tree { list-style: none; margin: 0; padding: 0; }
.reader-trama-tree-children { position: relative; margin: .42rem 0 0 14px; padding-left: 28px; }
.reader-trama-tree-children::before { content: ""; position: absolute; left: 0; top: -10px; bottom: 18px; border-left: 1px solid #cbd5e1; }
.reader-trama-node { position: relative; margin: .48rem 0; min-width: 520px; }
.reader-trama-tree-children > .reader-trama-node::before { content: ""; position: absolute; left: -28px; top: 27px; width: 22px; border-top: 1px solid #cbd5e1; }
.reader-trama-tree-children > .reader-trama-node:last-child::after { content: ""; position: absolute; left: -29px; top: 28px; bottom: -12px; width: 3px; background: #fbfcfd; }
.reader-trama-row { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: start; gap: .38rem; }
.reader-trama-toggle, .reader-trama-toggle-spacer { width: 30px; height: 30px; margin-top: 12px; }
.reader-trama-toggle { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #d7dee8; border-radius: 50%; background: #fff; color: #526176; cursor: pointer; }
.reader-trama-toggle span { font-size: 1.25rem; line-height: 1; transform: rotate(90deg); transition: transform .18s ease; }
.reader-trama-node.is-collapsed > .reader-trama-row .reader-trama-toggle span { transform: rotate(0deg); }
.reader-trama-node.is-collapsed > .reader-trama-tree-children { display: none; }
.reader-trama-card { border: 1px solid #dde5ed; border-radius: 13px; background: #fff; box-shadow: 0 4px 12px rgba(15, 23, 42, .035); overflow: visible; }
.reader-trama-chapter { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem; min-height: 56px; padding: .65rem .78rem; color: inherit; text-decoration: none; }
.reader-trama-chapter:hover { background: #fafcff; }
.reader-trama-chapter:focus-visible { outline: 3px solid rgba(44, 82, 130, .18); outline-offset: 2px; border-radius: 12px; }
.reader-trama-dot { width: 11px; height: 11px; border-radius: 50%; background: #8fa0b4; box-shadow: 0 0 0 4px #edf2f7; }
.reader-trama-copy { min-width: 0; display: grid; gap: .18rem; }
.reader-trama-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--ff-heading, Montserrat, sans-serif); font-size: 1rem; font-weight: 300; color: #172033; }
.reader-trama-synopsis {
    color: #5f6c7b;
    font-size: .74rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.reader-trama-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8793a3; font-size: .69rem; }
.reader-trama-node-meta { display: flex; justify-content: flex-end; align-items: center; gap: .3rem; flex-wrap: wrap; }
.reader-trama-chip { display: inline-flex; align-items: center; min-height: 22px; padding: 0 .55rem; border-radius: 999px; background: #edf2f7; color: #5d6b7e; font-size: .64rem; font-weight: 600; white-space: nowrap; }
.reader-trama-chip.is-root-chip { background: #eee9ff; color: #6e45b8; }
.reader-trama-chip.is-current-chip { background: #dff3e5; color: #246b39; }
.reader-trama-node.is-shared > .reader-trama-row .reader-trama-dot { background: #7458ba; box-shadow: 0 0 0 4px #ece8f8; }
.reader-trama-node.is-endpoint > .reader-trama-row .reader-trama-card { border-color: #bcd9c5; box-shadow: 0 0 0 2px rgba(47, 133, 51, .07); }
.reader-trama-node.is-endpoint > .reader-trama-row .reader-trama-dot { background: #2f8533; box-shadow: 0 0 0 4px #e1f2e2; }
.reader-trama-endpoint { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .62rem .72rem; border-top: 1px solid #e8eef3; background: #fbfdfb; flex-wrap: wrap; }
.reader-trama-endpoint-copy { min-width: 0; display: grid; gap: .1rem; }
.reader-trama-endpoint-copy strong { color: #334155; font-size: .74rem; font-weight: 600; }
.reader-trama-endpoint-copy small { color: #8a96a6; font-size: .64rem; }
.reader-trama-actions { position: relative; display: flex; gap: .38rem; align-items: center; flex-wrap: wrap; }
.reader-trama-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 .78rem; border: 1px solid #d7e0e9; border-radius: 999px; background: #fff; color: #3d5067; font-size: .72rem; font-weight: 600; text-decoration: none; }
.reader-trama-btn:hover { background: #f2f6f9; text-decoration: none; }
.reader-trama-btn.is-primary { border-color: #2c5282; background: #2c5282; color: #fff; }
.reader-trama-btn.is-primary:hover { background: #24476f; }
.reader-trama-more { position: relative; }
.reader-trama-more summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 .72rem; border: 1px solid #d7e0e9; border-radius: 999px; background: #fff; color: #3d5067; font-size: .72rem; font-weight: 600; cursor: pointer; }
.reader-trama-more summary::-webkit-details-marker { display: none; }
.reader-trama-more-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 165px; padding: .35rem; border: 1px solid #dce4ec; border-radius: 10px; background: #fff; box-shadow: 0 12px 30px rgba(15, 23, 42, .14); }
.reader-trama-more-menu a { display: block; padding: .55rem .65rem; border-radius: 7px; color: #405168; font-size: .72rem; text-decoration: none; white-space: nowrap; }
.reader-trama-more-menu a:hover { background: #f2f5f8; }
.reader-trama-more-menu a.is-danger { color: #b42318; }
.reader-trama-empty-story, .reader-trama-no-node-results { padding: 2rem 1rem; text-align: center; color: #718096; }

@media (max-width: 760px) {
    .reader-tramas-head { align-items: stretch; }
    .reader-tramas-controls { width: 100%; }
    .reader-tramas-search { min-width: 0; flex: 1 1 100%; }
    .reader-tramas-global-button { flex: 1 1 0; }
    .reader-trama-story-summary { grid-template-columns: 48px minmax(0, 1fr) 24px; min-height: 70px; gap: .7rem; padding: .65rem .75rem; }
    .reader-trama-cover { width: 48px; height: 48px; }
    .reader-trama-story-stats { grid-column: 2; justify-items: start; display: flex; gap: .4rem; flex-wrap: wrap; }
    .reader-trama-story-chevron { grid-column: 3; grid-row: 1 / span 2; }
    .reader-trama-story-body { padding: .85rem .65rem 1rem; }
    .reader-trama-story-actions { width: 100%; }
    .reader-trama-story-actions .reader-trama-btn { flex: 1 1 100%; }
    .reader-trama-tool { flex: 1 1 0; }
    .reader-trama-node { min-width: 0; }
    .reader-trama-tree-children { margin-left: 6px; padding-left: 19px; }
    .reader-trama-tree-children > .reader-trama-node::before { left: -19px; width: 14px; }
    .reader-trama-tree-children > .reader-trama-node:last-child::after { left: -20px; }
    .reader-trama-chapter { grid-template-columns: auto minmax(0, 1fr); }
    .reader-trama-node-meta { grid-column: 2; justify-content: flex-start; }
    .reader-trama-copy strong { white-space: normal; line-height: 1.2; }
    .reader-trama-endpoint { align-items: stretch; }
    .reader-trama-actions { width: 100%; }
    .reader-trama-actions .reader-trama-btn { flex: 1 1 auto; }
    .reader-trama-more { flex: 0 0 auto; }
    .reader-trama-more-menu { right: 0; }
}
