/* Vault — stage 4.2. Layout only; tokens and components come from tokens.css and ui.css. */
.va-root{overflow-x:clip}
.va-page{display:grid;gap:var(--s-5);padding-bottom:var(--s-16)}
.va-rooms{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-2)}
.va-rooms .ui-chip{min-height:30px;padding:0 var(--s-3);font-size:var(--t-13)}
.va-rooms .ui-count{margin-left:6px}
.va-facts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-3)}
.va-range{grid-column:1/-1;display:flex;justify-content:flex-end;margin-bottom:calc(var(--s-1) * -1)}
.va-scope,.va-split{font-size:var(--t-12);color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.va-split:empty{display:none}
.va-fact{display:grid;gap:2px;text-align:left;cursor:pointer;border:0;font:inherit;color:inherit;padding:var(--s-3) var(--s-4)}
.va-fact[data-zero]{opacity:.7}
.va-fact[aria-pressed="true"]{outline:2px solid var(--accent);outline-offset:-2px}

.va-toolbar{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.va-toolbar .ui-search{min-width:220px;flex:1 1 220px;max-width:340px}
.va-grid{--tiles:4}
.va-tile{outline-offset:-2px}
.va-tile[data-attn]{box-shadow:var(--edge-light),inset 0 0 0 1px var(--attention)}
.va-media{position:relative;cursor:pointer}
.va-media img{transition:transform var(--dur-2) var(--ease-out)}
.va-tile:hover .va-media img{transform:scale(1.02)}
/* the select mark is the system's tile ordinal: a 22px circle, dark until selected, then amber with the check centred */
.va-check{position:absolute;top:8px;left:8px;z-index:2;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.6);color:var(--fg-1);backdrop-filter:blur(2px);opacity:0;transition:opacity var(--dur-1) var(--ease-out),background var(--dur-1) var(--ease-out);cursor:pointer}
.va-check input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;width:100%;height:100%}
.va-check .ui-icon{width:14px;height:14px;stroke-width:2.2;opacity:.55;pointer-events:none}
.va-tile:hover .va-check,.va-tile:focus-within .va-check,.va-tile[aria-selected="true"] .va-check{opacity:1}
.va-tile[aria-selected="true"] .va-check{background:var(--accent);color:var(--accent-fg)}
.va-tile[aria-selected="true"] .va-check .ui-icon{opacity:1}
.va-check:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.va-chips{position:absolute;top:6px;right:6px;display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;z-index:1}
.va-chips .ui-chip{background:rgba(0,0,0,.6);color:#fff;font-size:10px;min-height:20px}
.va-len{position:absolute;right:6px;bottom:6px;padding:2px 6px;border-radius:4px;background:rgba(0,0,0,.65);color:#fff;font:var(--w-medium) 11px/1.4 var(--font);font-variant-numeric:tabular-nums}
.va-status{display:flex;align-items:center;gap:var(--s-2);min-height:18px;font-size:var(--t-12)}
.va-detail{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.va-acts{display:flex;gap:4px;flex-wrap:wrap;margin-top:2px}
.va-acts .ui-btn[data-size="sm"]{padding:0 8px;height:26px}
.va-divider{display:flex;align-items:center;gap:var(--s-3);color:var(--fg-3);font-size:var(--t-11);letter-spacing:.06em;text-transform:uppercase;margin:var(--s-2) 0 calc(var(--s-2) * -1)}
.va-divider::after{content:"";flex:1;height:1px;background:var(--edge)}
.va-more{display:grid;place-items:center;min-height:40px;padding:var(--s-3)}
.ui-selbar#va-selbar{position:fixed;top:auto;left:50%;bottom:var(--s-5);translate:-50% 0;z-index:var(--z-sticky);width:max-content;max-width:calc(100vw - 32px);box-shadow:var(--shadow-menu),var(--edge-light)}
#va-selhost:empty{display:none}
.va-sheet{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s-5)}
.va-sheet-media{position:relative;border-radius:var(--r-md);overflow:hidden;background:#000;display:grid;place-items:center;max-height:min(66vh,620px)}
.va-sheet-media video,.va-sheet-media img{width:100%;max-height:min(66vh,620px);object-fit:contain;display:block}
.va-sheet-side{display:grid;gap:var(--s-4);align-content:start}
.va-form{display:grid;gap:var(--s-3)}
.va-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.va-add{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.va-sheet-facts{font-size:var(--t-12)}
.ui-grid[data-tiles-n="6"] .va-acts .ui-btn span,.ui-grid[data-tiles-n="7"] .va-acts,.ui-grid[data-tiles-n="8"] .va-acts{display:none}
.ui-grid[data-tiles-n="7"] .va-status,.ui-grid[data-tiles-n="8"] .va-status{font-size:var(--t-11)}
/* the tab strip other screens borrow (Setup sections, the Activity filter) */
.vault-tabs{display:flex;gap:var(--s-5);border-bottom:1px solid var(--edge);margin:var(--s-2) 0 var(--s-5);overflow:auto}
.vault-tabs button{border:0;background:none;padding:12px 0;color:var(--fg-3);font:inherit;font-size:var(--t-13);white-space:nowrap;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.vault-tabs button.active{color:var(--fg-1);border-bottom-color:var(--fg-1)}
.vault-tabs button:hover{color:var(--fg-1)}
@media (max-width:700px){
  .va-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .va-fact:last-child{grid-column:1/-1}
  .va-toolbar .ui-seg,.va-toolbar .ui-density,.va-toolbar [data-act="sort"]{display:none}
  .va-grid{--tiles:2!important}
  .va-acts .ui-btn[data-act="file"],.va-acts .ui-btn[data-act="more"]{display:none}
  .va-check{display:none}
  .va-range{justify-content:flex-start}
  .va-sheet,.va-row{grid-template-columns:1fr}
  .ui-selbar#va-selbar{bottom:var(--s-3);max-width:calc(100vw - 16px)}
}