/**
 * Verse Project Viewer styles
 *
 * Hierarchical tree where each file is a collapsible <details> block with an
 * inline code block. Matches xwrite design tokens.
 */

.verse-viewer {
    background: #fff;
    color: #333;
    border-radius: 10px;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.03);
    margin: 24px 0;
    overflow: hidden;
    font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
}

.verse-viewer--empty {
    padding: 16px 20px;
    color: #888;
    font-style: italic;
}

/* ---------- Header ---------- */
.verse-viewer__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background: rgba(30, 115, 190, 0.08);
    border-bottom: 1px solid rgba(30, 115, 190, 0.18);
    flex-wrap: wrap;
}
.verse-viewer__icon { font-size: 22px; line-height: 1; }
.verse-viewer__title { flex: 1; line-height: 1.4; min-width: 0; }
.verse-viewer__title strong { color: #1e73be; font-size: 15px; }
.verse-viewer__meta { display: block; color: #666; font-size: 12px; }
.verse-viewer__dl {
    background: #1e73be;
    color: #fff;
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
}
.verse-viewer__dl:hover { background: #145d99; color: #fff; }

/* ---------- Body ---------- */
.verse-viewer__body {
    padding: 14px 18px 18px;
}
.verse-viewer__loading,
.verse-viewer__empty {
    color: #888;
    padding: 8px 0;
    font-style: italic;
}

/* ---------- Toolbar ---------- */
.verse-viewer__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #ddd;
}
.verse-viewer__toolbtn {
    background: #f3f5f8;
    color: #555;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
}
.verse-viewer__toolbtn:hover { background: #e7edf3; color: #1e73be; border-color: #1e73be; }

/* ---------- Tree ---------- */
.verse-tree {
    list-style: none;
    margin: 0;
    padding: 0;
}
.verse-tree--root {
    margin-top: 4px;
}
/* Nested lists indent visually + show a guide line */
.verse-tree__item .verse-tree {
    margin-left: 14px;
    padding-left: 12px;
    border-left: 1px dashed #d6d6d6;
}
.verse-tree__item {
    margin: 4px 0;
}

/* details/summary reset */
.verse-tree__dir,
.verse-tree__file {
    display: block;
}
.verse-tree__dir > summary,
.verse-tree__file > summary {
    list-style: none;
    cursor: pointer;
}
.verse-tree__dir > summary::-webkit-details-marker,
.verse-tree__file > summary::-webkit-details-marker {
    display: none;
}

/* ---------- Row (summary) ---------- */
.verse-tree__row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 4px;
    color: #333;
    font-family: Menlo, Consolas, "Hiragino Kaku Gothic Pro", monospace;
    font-size: 13px;
    line-height: 1.55;
    user-select: none;
    transition: background .12s;
}
.verse-tree__row:hover { background: #f0f3f8; }

/* Caret rendered via ::before; rotates when <details> is open */
.verse-tree__row::before {
    content: "▸";
    display: inline-block;
    width: 12px;
    color: #888;
    font-size: 10px;
    transition: transform .12s;
}
.verse-tree__dir[open]  > .verse-tree__row::before,
.verse-tree__file[open] > .verse-tree__row::before {
    transform: rotate(90deg);
    color: #1e73be;
}

.verse-tree__row--dir {
    font-weight: 600;
    color: #1e73be;
}
.verse-tree__row--file {
    color: #444;
}
.verse-tree__icon { flex: 0 0 16px; font-size: 14px; }
.verse-tree__name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.verse-tree__size {
    color: #999;
    font-size: 11px;
}
.verse-tree__dl {
    color: #1e73be;
    text-decoration: none;
    font-size: 14px;
    padding: 0 6px;
    border-radius: 3px;
}
.verse-tree__dl:hover { background: rgba(30,115,190,0.13); }

/* ---------- Inline code block (file body) ---------- */
.verse-tree__pre {
    margin: 6px 0 10px 18px;
    padding: 0;
    background: #12002c;
    border-radius: 6px;
    border: 1px solid #2a0a4a;
    overflow: auto;
    max-height: 480px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.verse-tree__pre code {
    display: block;
    padding: 14px 16px;
    background: transparent;
    color: #d4d4d4;
    font-family: Menlo, Consolas, "Hiragino Kaku Gothic Pro", monospace;
    font-size: 13px;
    line-height: 1.7;
    white-space: pre;
}

/* Non-verse files (json/md/txt) get a lighter background to differentiate */
.verse-tree__file[data-path$=".json"] .verse-tree__pre,
.verse-tree__file[data-path$=".md"]   .verse-tree__pre,
.verse-tree__file[data-path$=".txt"]  .verse-tree__pre {
    background: #1e1e1e;
    border-color: #333;
}