/* Private Vault front-end preview. Layout only; source media remains unconnected.
 * Scoped to [data-vault-root] and the standalone fullscreen dialog.
 * Do not modify the shared Midnight Glass material, rim or motion controller.
 */

#screen [data-vault-root] { width:100%; min-width:0; }
#screen [data-vault-root] .card { min-width:0; }
#screen .vault-overview-heading,
#screen .vault-player-head,
#screen .vault-section-title{
 display:flex;align-items:center;justify-content:space-between;gap:10px;
}
#screen .vault-overview-heading strong,
#screen .vault-section-title strong,
#screen .vault-player-head strong{
 font-weight:700;font-size:15px;letter-spacing:-.16px;
}
#screen .vault-overview-heading .chip,
#screen .vault-player-head .chip{
 flex:0 0 auto;font-size:9px!important;white-space:nowrap;letter-spacing:.04em;
}
#screen .vault-overview > .hint { margin:13px 0 14px!important;font-size:12px!important;line-height:1.5!important; }
#screen .vault-health-grid {
 display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px;
}
#screen .vault-health-source {
 display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
 gap:6px;min-width:0;min-height:64px;padding:11px 9px;
 border-radius:13px;
 background:linear-gradient(150deg,rgba(180,139,214,.085),rgba(31,25,43,.28));
 border:1px solid rgba(217,183,247,.115);
}
#screen .vault-health-name {
 display:inline-flex;align-items:center;gap:7px;
 font-size:12px;font-weight:700;white-space:nowrap;color:#e9def4;
}
#screen .vault-health-dot {
 width:7px;height:7px;flex:0 0 7px;border-radius:50%;
 background:#95869f;box-shadow:0 0 0 2px rgba(174,152,189,.09);
}
#screen .vault-health-source small {
 font-size:10px!important;letter-spacing:0!important;white-space:nowrap;
 color:#a99ab7!important;line-height:1.35!important;
}

/* Search form. The search button is deliberately disabled until a secure
 * backend source has been wired; the selects remain usable for UI review. */
#screen .vault-filter-grid {
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px;
}
#screen .vault-field { min-width:0; }
#screen .vault-field > label {
 display:block;margin:0 0 8px;
 color:#c1b2d1;font-size:12px;font-weight:650;line-height:1.3;
}
#screen .vault-field > :is(input,select) {
 box-sizing:border-box;width:100%!important;min-width:0!important;
 min-height:48px!important;height:48px!important;
 margin:0!important;padding:0 13px!important;
 border-radius:var(--sb-field-radius,14px)!important;
 font-family:inherit!important;font-size:16px!important;
 text-overflow:ellipsis;
}
#screen .vault-field > select { padding-right:30px!important; }
#screen .vault-tag-field{ margin-top:17px; }
#screen .vault-search-button {
 width:100%!important;margin-top:21px!important;
 min-height:48px!important;height:48px!important;
}
#screen .vault-search-button:disabled {cursor:not-allowed;opacity:.47!important;box-shadow:none!important;}
#screen .vault-connect-note {
 font-size:11px!important;line-height:1.5!important;
 margin:13px 1px 0!important;
}

/* The existing card is the border. Only the contained player changes aspect. */
#screen .vault-player-head{margin-bottom:17px;}
#screen .vault-player .vault-player-stage#sb-vault-player-stage{
 box-sizing:border-box;position:relative;
 display:flex!important;align-items:center!important;justify-content:center!important;
 padding:0!important;margin:0!important;gap:0!important;
 width:100%!important;height:auto!important;min-height:0!important;
 aspect-ratio:auto!important;overflow:hidden;
 border-radius:17px!important;
 background:radial-gradient(ellipse at 60% 20%,rgba(90,56,131,.15),transparent 70%),
  rgba(7,6,13,.65)!important;
 border:1px solid rgba(203,173,235,.13)!important;
}
#screen .vault-media-target {
 display:block;flex:0 0 auto;position:relative;overflow:hidden;
 appearance:none;-webkit-appearance:none;
 width:100%!important;max-width:100%!important;
 padding:0!important;margin:0!important;
 border:0!important;border-radius:0!important;
 background:transparent!important;cursor:zoom-in;
 box-shadow:none!important;line-height:0;
 touch-action:pan-y;
}
#screen .vault-player-stage[data-vault-orientation="portrait"] .vault-media-target {
 width:min(100%,240px)!important;
}
#screen .vault-media-target :is(img,video){
 display:block;width:100%!important;max-width:100%!important;
 height:auto!important;max-height:none!important;object-fit:contain;
 border:0!important;border-radius:0!important;box-shadow:none!important;
 -webkit-user-select:none;user-select:none;pointer-events:none;
}
/* Hidden media must stay hidden even though the shared media sizing rule
 * above uses display:block!important. Native video owns its own fullscreen UI. */
#screen .vault-media-target :is(img,video)[hidden]{display:none!important;}
#screen .vault-media-target video {
 background:#090713;
 /* The stage button opens native fullscreen, so no nested inline video UI. */
 pointer-events:none;
}

#screen .vault-media-target:focus-visible{
 outline:2px solid #b388eb!important;outline-offset:-4px!important;
 box-shadow:inset 0 0 15px rgba(179,136,235,.20)!important;
}
#screen .vault-demo-label{
 position:absolute;top:10px;left:10px;
 padding:5px 8px;background:rgba(8,7,15,.67);
 border:1px solid rgba(227,206,249,.21);border-radius:7px;
 color:#ded0ed;font-size:9px;font-weight:750;line-height:1.1;letter-spacing:.13em;
 pointer-events:none;
}
#screen .vault-video-play {
 position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
 display:flex;align-items:center;justify-content:center;
 width:51px;height:51px;border-radius:50%;
 border:1px solid rgba(238,218,255,.53);
 color:#f9f4ff;background:rgba(21,14,33,.60);
 box-shadow:0 0 20px rgba(179,136,235,.18);
 pointer-events:none;
}
#screen .vault-video-play[hidden]{display:none!important;}
#screen .vault-video-play svg{width:22px;height:22px;margin-left:3px;}
#screen .vault-expand-mark {
 position:absolute;right:10px;bottom:10px;
 display:flex;align-items:center;justify-content:center;
 width:30px;height:30px;border-radius:9px;
 background:rgba(9,7,16,.58);border:1px solid rgba(228,205,247,.20);
 color:#ecdef8;pointer-events:none;
}
#screen .vault-expand-mark svg{width:18px;height:18px;}
#screen .vault-playback-context {
 display:flex;justify-content:space-between;align-items:center;
 gap:10px;margin-top:12px;min-width:0;
}
#screen .vault-playback-context small{
 font-size:10px!important;font-weight:550!important;
 color:#b6a4c6!important;line-height:1.5!important;
}
#screen .vault-playback-context small:last-child{text-align:right;}
#screen .vault-player-actions{
 display:grid;grid-template-columns:minmax(0,1fr) 50px minmax(0,1fr);
 align-items:stretch;gap:10px;margin-top:18px;
}
#screen .vault-player-actions > button{
 box-sizing:border-box;display:flex;align-items:center;justify-content:center;
 gap:6px;width:100%!important;min-width:0!important;
 height:48px!important;min-height:48px!important;
 margin:0!important;padding:0 9px!important;
 border-radius:var(--sb-control-radius,17px)!important;
 font-size:13px!important;font-weight:700!important;
}
#screen .vault-player-actions svg{
 width:17px;height:17px;flex:0 0 17px;
}
#screen .vault-player-actions .vault-favorite{
 padding:0!important;border-radius:16px!important;opacity:.47!important;
 cursor:not-allowed;box-shadow:none!important;
}
#screen .vault-player-actions .vault-favorite svg{width:20px;height:20px;flex:0 0 20px;}
#screen .vault-player-footnote{
 margin:15px 0 0!important;font-size:11px!important;line-height:1.5!important;
}

/* Favorites uses the very same glass player, with an honest empty state
 * until Claude provides authorized SQLite-backed saved media. */
#screen .vault-media-target[hidden],
#screen .vault-favorites-empty[hidden],
#screen .vault-player-actions > button[hidden] {
 display:none!important;
}
#screen .vault-player .vault-player-stage#sb-vault-player-stage[data-vault-view="favorites"] {
 min-height:190px!important;
}
#screen .vault-favorites-empty {
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 gap:10px;max-width:280px;margin:auto;padding:22px 16px;
 text-align:center;line-height:1.5;
}
#screen .vault-empty-heart {
 display:flex;align-items:center;justify-content:center;
 width:45px;height:45px;border-radius:14px;
 border:1px solid rgba(207,163,238,.18);
 background:linear-gradient(145deg,rgba(179,136,235,.17),rgba(179,136,235,.035));
 font-size:28px;line-height:1;color:#c9a6f1;
}
#screen .vault-favorites-empty strong {
 color:#e9dff4;font-size:14px;font-weight:700;
}
#screen .vault-favorites-empty > span:last-child {
 color:#aaa0b8;font-size:12px;
}
#screen .vault-player-actions > button:disabled {
 opacity:.45!important;cursor:not-allowed;box-shadow:none!important;
}
/* The same heart works both ways once real server-backed media is shown.
 * Keep its disabled state quiet until SQLite confirms a saved item. */
#screen .vault-player-actions .vault-favorite[aria-pressed="true"]:not(:disabled){
 color:#e5c9ff!important;
 border-color:rgba(214,166,245,.50)!important;
}
#screen .vault-player-actions .vault-favorite[aria-pressed="true"]:not(:disabled) svg {
 fill:rgba(179,136,235,.60);
 stroke:#f4dfff;
}
#screen .vault-player-actions .vault-favorite[aria-pressed="false"]:not(:disabled) svg {
 fill:none;
}

/* The native <dialog> is outside #screen so fullscreen never stretches its
 * parent card or breaks its masked moving rim. Escape/Close returns to Vault. */
html.sb-vault-fullscreen-open{overflow:hidden;}
dialog.sb-vault-fullscreen {
 box-sizing:border-box;position:fixed;inset:0;
 width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;
 padding:calc(63px + env(safe-area-inset-top)) 12px
  calc(23px + env(safe-area-inset-bottom));
 margin:0;border:0;border-radius:0;background:#050408;
 color:#e7ddf2;overflow:hidden;
}
dialog.sb-vault-fullscreen[open]{
 display:flex;flex-direction:column;align-items:center;justify-content:center;
}
dialog.sb-vault-fullscreen::backdrop{background:rgba(0,0,0,.97);}
dialog.sb-vault-fullscreen .sb-vault-close{
 position:absolute;top:calc(12px + env(safe-area-inset-top));right:15px;
 z-index:2;display:inline-flex;align-items:center;gap:7px;
 min-height:44px;padding:8px 13px;border-radius:13px;
 background:rgba(54,39,72,.83);border:1px solid rgba(216,177,247,.35);
 color:#f3eafb;font-family:inherit;font-size:13px;font-weight:700;
}
dialog.sb-vault-fullscreen .sb-vault-close svg{width:17px;height:17px;}
dialog.sb-vault-fullscreen .sb-vault-close:focus-visible{
 outline:2px solid #b388eb;outline-offset:3px;
}
dialog.sb-vault-fullscreen .sb-vault-fullscreen-content{
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 gap:14px;width:100%;height:100%;max-height:100%;margin:0;
}
dialog.sb-vault-fullscreen .sb-vault-fullscreen-content img{
 display:block;object-fit:contain;
 width:auto;height:auto;max-width:100%;max-height:calc(100% - 40px);
 border-radius:7px;
}
dialog.sb-vault-fullscreen figcaption{
 font-size:11px;line-height:1.5;text-align:center;color:#baa7cc;
}
@media(max-width:365px){
 #screen .vault-health-grid{gap:6px}
 #screen .vault-health-source{padding:9px 7px}
 #screen .vault-health-source small{font-size:9px!important}
 #screen .vault-player-actions{gap:7px}
 #screen .vault-player-actions > button{font-size:12px!important;padding-inline:6px!important}
}
@media(prefers-reduced-motion:reduce){
 #screen .vault-media-target{scroll-behavior:auto}
}