/* ui.css — shared component styles for upload.daem0n.dev surfaces.
   Loaded BEFORE each page's own <style>, so page-specific rules win ties. */

/* icon buttons */
button.ib{
  background:var(--btnBg); border:1px solid var(--btnBorder); border-radius:6px;
  color:var(--termFg); font-family:ui-monospace,Menlo,monospace;
  padding:.3rem .55rem; font-size:.85rem; line-height:1.2; cursor:pointer; flex-shrink:0; min-width:0;
}
button.ib:hover{ background:var(--btnHover) }
button.heart.on{ color:#e0526e; border-color:rgba(224,82,110,.45) }

/* segmented view-mode control */
.seg{ display:inline-flex; flex-shrink:0 }
.seg button{ margin:0; border-radius:0 }
.seg button:first-child{ border-radius:8px 0 0 8px }
.seg button:last-child{ border-radius:0 8px 8px 0; border-left-width:0 }
.seg button.on{ background:var(--btnHover); color:var(--ok) }

/* tap-to-view affordance */
.tappable{ cursor:pointer }
.tappable:hover{ color:var(--ok) }

/* heart badge on thumbnails */
.theart{ position:absolute; top:.3rem; right:.3rem; font-size:.62rem; color:#fff; z-index:1;
  background:rgba(224,82,110,.9); border-radius:99px; padding:.12rem .4rem; font-family:ui-sans-serif,system-ui }

/* file tiles: desktop cards + phone variants */
.tile{ background:var(--s1); border:1px solid var(--line); border-radius:12px; overflow:hidden; display:flex; flex-direction:column }
.tile .tmedia{ position:relative; aspect-ratio:16/10; background:var(--thumbBg); display:flex; align-items:center; justify-content:center }
.tile .tmedia img{ width:100%; height:100%; object-fit:cover; display:block }
.tile .tmedia .ticon, .tile .tmedia .icon{ font-size:2.1rem }
.tile .tdur{ position:absolute; right:.4rem; bottom:.4rem; background:rgba(0,0,0,.65); color:#fff;
  font-family:ui-monospace,Menlo,monospace; font-size:.68rem; padding:.12rem .38rem; border-radius:5px }
.tile .tinfo{ padding:.5rem .6rem .55rem }
.tile .tname{ font-family:ui-monospace,Menlo,monospace; font-size:.76rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.tile .trow{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:.4rem }
.tile .tsize{ color:var(--muted); font-size:.7rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.tile .tacts{ display:flex; gap:.3rem; flex-shrink:0 }

/* grid modes: cards = single column, compact = thumbnail squares */
.grid.cards{ grid-template-columns:1fr }
.grid.compact{ grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); gap:.5rem }
.grid.compact .tile{ position:relative; aspect-ratio:1 }
.grid.compact .tile .tmedia{ position:absolute; inset:0; aspect-ratio:auto }
.grid.compact .tile .tinfo{ position:absolute; left:0; right:0; bottom:0; padding:.9rem .4rem .3rem;
  background:linear-gradient(transparent, rgba(0,0,0,.78)) }
.grid.compact .tile .tname{ color:#fff; font-size:.62rem }
.grid.compact .tile .trow{ display:none }
.grid.compact .tile .tdur{ bottom:1.45rem }

/* lightbox */
#viewer{ position:fixed; inset:0; z-index:20; display:none; background:rgba(0,0,0,.9); backdrop-filter:blur(6px);
  align-items:center; justify-content:center; flex-direction:column; gap:.8rem; padding:1rem }
#viewer.open{ display:flex }
#viewer .vtitle{ font-family:ui-monospace,Menlo,monospace; color:var(--termFg); font-size:.8rem; word-break:break-all; text-align:center; max-width:92vw }
#vbody{ max-width:96vw; max-height:78vh; display:flex; align-items:center; justify-content:center }
#vbody img, #vbody video{ max-width:96vw; max-height:74vh; border-radius:10px }
#vbody pre{ background:rgba(25,35,30,.95); color:#e8f5ee; border-radius:10px; padding:1rem; font-size:.8rem; white-space:pre-wrap; max-width:92vw; max-height:70vh; overflow:auto }
#vclose{ position:fixed; top:.9rem; right:1rem; z-index:21 }
#vbar{ display:flex; align-items:center; justify-content:space-between; gap:.7rem; width:min(34rem,92vw) }
#vbar #vactions{ flex:1 }
#vactions{ display:flex; gap:.6rem; align-items:center; justify-content:center; flex-wrap:wrap }
.vnav{ font-size:1.1rem; padding:.45rem .85rem; line-height:1; flex-shrink:0 }
.vnav[disabled]{ opacity:.22; pointer-events:none }
#vcount{ color:rgba(255,255,255,.6); font-size:.72rem; font-family:ui-monospace,Menlo,monospace }

/* comments panel */
#vnotes{ width:min(34rem,92vw); max-height:38vh; overflow:auto; text-align:left;
  background:var(--toastBg); border:1px solid var(--line); border-radius:10px; padding:.6rem .8rem }
#vnotes .note{ padding:.4rem 0; border-bottom:1px solid var(--line); font-size:.78rem }
#vnotes .note:last-of-type{ border-bottom:none }
#vnotes .note b{ color:var(--termFg); font-family:ui-monospace,Menlo,monospace; font-weight:500 }
#vnotes .nmeta{ color:var(--muted); font-size:.68rem; margin-left:.45rem }
#vnotes .ntext{ margin-top:.15rem; white-space:pre-wrap; word-break:break-word }
#vnotes form{ display:flex; gap:.4rem; margin-top:.55rem; align-items:center }
#vnotes input{ flex:1; min-width:0; background:var(--inputBg); border:1px solid var(--btnBorder); border-radius:8px;
  color:var(--fg); font-size:.8rem; padding:.45rem .6rem; outline:none }

/* download-choice popover (trusted local user only) */
.dlmenu{ position:fixed; z-index:22; min-width:11rem; padding:.3rem;
  background:var(--toastBg); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.45); display:flex; flex-direction:column; gap:.15rem }
.dlmenu .dlitem{ width:100%; text-align:left; background:transparent; border:1px solid transparent;
  border-radius:7px; color:var(--termFg); font-family:ui-monospace,Menlo,monospace;
  font-size:.8rem; line-height:1.3; padding:.45rem .55rem; cursor:pointer }
.dlmenu .dlitem:hover{ background:var(--btnHover); border-color:var(--btnBorder) }

/* a11y + web-app feel */
:focus-visible{ outline:2px solid var(--ok); outline-offset:2px }
@media (prefers-reduced-motion: reduce){ .aurora{ animation:none } .cursor{ animation:none } }
/* 16px inputs on touch screens: stops iOS auto-zooming into focused fields */
@media (max-width:999px){ #vnotes input, #keybox input, #login input{ font-size:16px } }

/* footer: quiet divider above the copyright */
footer{ border-top:1px solid var(--line); padding-top:.85rem }