/* Family Vault 1.5 — Documents › Folders: the library folder as a tree (computer) or a list you go into (phone). */

.lt{display:grid;gap:14px;min-width:0}
.lt-note{align-items:center}
.lt-note > span{flex:1;min-width:0}
.lt-note .num{overflow-wrap:anywhere}
.lt-note-acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.lt-pending{display:block;margin-top:4px}
.lt-filter{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lt-filter .search{max-width:420px}
.lt-grid{display:grid;grid-template-columns:minmax(250px,340px) minmax(0,1fr);gap:16px;align-items:start}

body.panel-open .lt-grid{grid-template-columns:minmax(220px,280px) minmax(0,1fr)}

/* the tree */
.lt-tree{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto;padding:10px 8px;gap:0}
.lt-tree ul{list-style:none;margin:0;padding:0}
.lt-tree ul[role=group]{margin-left:13px;padding-left:6px;border-left:1px solid var(--line)}
.lt-tree [role=treeitem]{outline:none}
.lt-n{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:8px;cursor:pointer;min-width:0;color:var(--fg);text-decoration:none;font-size:.9rem;line-height:1.35}
.lt-n:hover{background:var(--surface-2)}
.lt-n .i{width:16px;height:16px;flex:none;color:var(--muted)}
.lt-n .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lt-n .cnt{font-size:.74rem;color:var(--faint,var(--muted));flex:none}
.lt-n .pill{font-size:.66rem;padding:0 6px}
.lt-n .tw{width:16px;height:16px;flex:none;display:grid;place-items:center}
.lt-n .tw .i{width:14px;height:14px;transition:transform .12s}
[aria-expanded=true] > .lt-n .tw .i{transform:rotate(90deg)}
[data-type=folder] > .lt-n .i:not(.tw .i){color:var(--accent)}
[aria-selected=true] > .lt-n{background:var(--accent-soft);font-weight:600}
[role=treeitem]:focus-visible > .lt-n{outline:2px solid var(--accent);outline-offset:-2px}
.lt-more{padding:2px 0 4px 28px}

/* the open folder */
.lt-here{gap:6px}
.lt-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.lt-h{font-size:1rem;margin:0}
.lt-crumb{flex-wrap:wrap;gap:4px 6px;font-size:.92rem;min-width:0}
.lt-crumb a{display:inline-flex;gap:6px;align-items:center;text-decoration:none;overflow-wrap:anywhere}
.lt-crumb a[aria-current=page]{color:var(--fg);font-weight:600}
.lt-list .row.link{text-decoration:none;color:inherit}
.lt-list .row.link:hover b{color:var(--accent)}
.lt-up{display:none}
.lt-file .grow > a{font-weight:500;display:block}
.lt-acts{display:flex;gap:2px;align-items:center;flex:none}
.lt-acts .btn{padding:6px 8px}
.lt-pathline{display:flex;gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm,8px);background:var(--bg);font-size:.86rem}

/* a phone: no tree, the open folder is the list; Back goes up one folder */
@media (max-width:820px){
  .lt-grid{grid-template-columns:minmax(0,1fr)}
  .lt-tree{display:none}
  .lt-up{display:flex}
  .lt-acts .lbl{display:none}
  .lt-acts .btn[data-lt-copy]{display:none}
  .lt-filter .lt-total{display:none}
  .lt-filter .search{max-width:none}
  .lt-note{flex-wrap:wrap}
  .lt-note > span{flex-basis:calc(100% - 30px)}
  .lt-note .lt-note-acts{margin-left:22px;justify-content:flex-start}
}

/* 1.34.7: Map (to try out): chips of the top folders, the folder map on the left, the folder picked on the right */
.lt-mode{margin-left:auto}
.lm-new{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;opacity:.8;margin-left:2px}
.lm-chips{display:flex;flex-wrap:wrap;gap:8px}
.lm-chips .chip{padding:8px 16px;font-size:.92rem;font-weight:600;display:inline-flex;gap:6px;align-items:center}
.lm-chips .chip .num{color:var(--muted);font-weight:500}
.lm-chips .chip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.lm-chips .chip.on .num{color:inherit;opacity:.8}
.lm-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:980px){.lm-grid{grid-template-columns:1fr}}
.lm-map{display:flex;flex-direction:column;gap:8px;overflow-x:auto;min-width:0}
.lm-map .lt-crumb{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap}
.lm-map .lt-crumb a{flex:none}
.lm-map .lt-crumb .i{width:16px;height:16px;flex:none}
.lm-map > svg{width:100%;min-width:520px;height:auto;display:block}
.lm-e{fill:none;stroke:var(--line);stroke-width:1.4}
.lm-e.on{stroke:var(--accent);stroke-width:2.4}
.lm-e.dim{opacity:.45}
.lm-n{cursor:pointer;outline:none}
.lm-n rect{fill:var(--surface);stroke:var(--line);stroke-width:1.3}
.lm-n .nm{font-size:15px;font-weight:600;fill:var(--fg)}
.lm-n .sub{font-size:12.5px;fill:var(--muted)}
.lm-n.mid rect{fill:var(--accent-soft);stroke:var(--accent)}
.lm-n.out rect{stroke-dasharray:4 3}
.lm-n.far{opacity:.45}
.lm-n.path rect{stroke:var(--accent);stroke-width:1.7}
.lm-n.sel rect{stroke:var(--accent);stroke-width:2.8}
.lm-n:hover rect,.lm-n:focus-visible rect{stroke:var(--accent)}
.lm-n:focus-visible rect{stroke-width:3}
.lm-none{padding:40px 0;text-align:center}
.lm-card{display:flex;flex-direction:column;gap:12px;min-width:0}
.lm-card > *{min-width:0}
.lm-h{display:flex;align-items:center;gap:12px;min-width:0}
.lm-h .lt-title{margin:0}
.lm-acts{display:flex;gap:6px;flex-wrap:wrap}
.lm-sec{display:flex;flex-direction:column;gap:6px}
.lm-lab{font-size:.74rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.lm-kb{display:grid;grid-template-columns:110px minmax(0,1fr) 36px;gap:10px;align-items:center;font-size:.86rem}
.lm-kb b{text-align:right}
.lm-bar{height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.lm-bar i{display:block;height:100%;border-radius:999px;background:var(--muted)}
.lm-bar .ft-pdf{background:#D93025}.lm-bar .ft-img{background:#188038}.lm-bar .ft-doc{background:#1A73E8}.lm-bar .ft-xls{background:#0F9D58}
.lm-bar .ft-vid{background:#8E44AD}.lm-bar .ft-zip{background:#7A6A4F}
.lm-file{grid-template-columns:none;display:flex;align-items:center;gap:10px}
.lm-path{font-size:.8rem;color:var(--muted);background:var(--surface-2);border-radius:10px;padding:8px 10px;overflow-wrap:anywhere}