/* ArcaneDrive Phase 2: additive responsive UX layer. No API or data changes. */
:root { --arc-touch:44px; }
html { -webkit-text-size-adjust:100%; }
body { overscroll-behavior-y:contain; }
button, a, input, select, textarea { -webkit-tap-highlight-color:transparent; }
button, [role="button"] { touch-action:manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
[tabindex]:focus-visible { outline:3px solid #14b8a6; outline-offset:3px; }
.directory-container, .content-area, .main-content, .table-body { min-width:0; }
.directory-container { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.directory-table { min-width:0; }
.header-cell, .table-cell { min-width:0; }
.table-body :is(a,button) { overflow-wrap:anywhere; }
.directory-grid { grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr)); gap:clamp(10px,1.5vw,20px); }
.directory-grid > * { min-width:0; }
.directory-grid :is(img,video) { max-width:100%; object-fit:contain; }
.content-title { overflow-wrap:anywhere; }
.content-subtitle { max-width:65ch; }
input,textarea,select { max-width:100%; }
img,svg,video { height:auto; }
svg { flex-shrink:0; }
@media (max-width: 900px) {
  :root { --sidebar-width:240px; }
  .container { grid-template-columns:minmax(0,1fr); }
  .main-content,.content-area { width:100%; min-width:0; }
  .content-area { padding-inline:clamp(12px,3vw,24px); }
  .directory-container { border-radius:14px; }
  .directory-grid { grid-template-columns:repeat(auto-fill,minmax(min(100%,160px),1fr)); }
}
@media (max-width: 640px) {
  html { scroll-padding-top:72px; }
  body { font-size:14px; }
  .container { min-height:100dvh; height:100dvh; }
  .content-area { padding-inline:12px; }
  .content-header { padding-block:12px; }
  .content-title { font-size:clamp(1.1rem,5vw,1.5rem); line-height:1.25; }
  .content-subtitle { font-size:.83rem; line-height:1.45; }
  .directory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .directory-grid > * { max-width:100%; overflow:hidden; }
  .directory-grid :is(h3,h4,p,span) { overflow-wrap:anywhere; }
  .table-header { font-size:.75rem; }
  .duration-cell { display:none; }
  .mobile-menu-toggle { min-width:var(--arc-touch); min-height:var(--arc-touch); }
  .bulk-btn { min-height:var(--arc-touch); }
  input,select,textarea { font-size:16px; }
  .directory-container { max-width:100%; }
}
@media (max-width: 360px) {
  .directory-grid { grid-template-columns:minmax(0,1fr); }
}
@media (pointer:coarse) {
  .feature-toggle, .mobile-menu-toggle, .bulk-btn { min-width:var(--arc-touch); min-height:var(--arc-touch); }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}


/* Phase 2.1: compact mobile file manager, aligned with actual directory markup */
@media (max-width: 700px) {
  .container { width:100%; max-width:100vw; }
  .main-content { overflow-x:hidden; }
  .content-area { padding:0 12px 12px!important; }
  .content-header { display:none!important; }
  .directory-container { overflow:hidden!important; border-radius:16px!important; }
  .directory-table { min-width:0!important; width:100%; overflow:hidden!important; border-radius:16px!important; }
  .table-header { grid-template-columns:minmax(0,1fr) 76px 42px!important; gap:6px!important; padding:12px!important; }
  .table-header .duration-cell { display:none!important; }
  .table-header .actions-cell { justify-content:center; }
  .table-header .name-cell { min-width:0; }
  .directory-item { grid-template-columns:minmax(0,1fr) 76px 42px!important; gap:6px!important; padding:11px 12px!important; min-height:66px!important; }
  .directory-item .item-duration { display:none!important; }
  .directory-item .item-name { min-width:0!important; gap:10px!important; overflow:hidden; }
  .directory-item .item-text { min-width:0!important; flex:1 1 auto; overflow:hidden; }
  .directory-item .item-title { display:block; min-width:0; max-width:100%; white-space:normal!important; overflow-wrap:anywhere; word-break:normal; line-height:1.35; font-size:13px; }
  .directory-item .item-icon { flex:0 0 36px; width:36px!important; height:36px!important; }
  .directory-item .item-size { min-width:0; text-align:right; white-space:normal; overflow-wrap:normal; font-size:11px; color:var(--text-muted); }
  .directory-item .item-actions { min-width:0; justify-content:center; }
  .directory-item .more-btn { width:40px!important; height:44px!important; }
  .directory-item .more-btn svg { width:18px; height:18px; }
  .directory-item .fav-btn { flex-shrink:0; }
  .table-body { overflow-x:hidden!important; overflow-y:auto!important; }
  .breadcrumb-container { min-width:0; max-width:100%; overflow:hidden; }
  .breadcrumb { min-width:0; max-width:100%; overflow-x:auto; white-space:nowrap; gap:2px; }
  .breadcrumb-item { flex:0 0 auto; font-size:12px; }
  .stats-container { max-width:100%; }
  .toolbar { max-width:100%; min-width:0; }
  .toolbar > * { min-width:0; }
  .directory-grid { overflow-y:auto; min-height:0; }
  .premium-features { right:12px!important; bottom:16px!important; }
}
@media (max-width:390px) {
  .table-header { grid-template-columns:minmax(0,1fr) 58px 40px!important; }
  .directory-item { grid-template-columns:minmax(0,1fr) 58px 40px!important; }
  .directory-item .item-icon { width:32px!important; height:32px!important; flex-basis:32px; }
}


/* Phase 2.2: mobile-first compact file rows; suppress desktop inline clutter */
@media (max-width:700px) {
  .main-content { padding:10px 12px 12px!important; height:100dvh!important; }
  .mobile-menu-toggle { position:fixed!important; top:calc(env(safe-area-inset-top,0px) + 12px)!important; left:12px!important; width:44px!important; height:44px!important; z-index:1001; }
  .topbar { min-height:52px!important; padding-left:56px!important; margin-bottom:8px!important; }
  .topbar-title { font-size:clamp(17px,5vw,23px)!important; line-height:1.2!important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .stats-container { padding:2px 6px!important; margin-bottom:8px!important; }
  .stat-filter-card { padding:6px 10px!important; }
  .breadcrumb-container { margin-bottom:8px!important; }
  .breadcrumb { padding:5px 8px!important; }
  .breadcrumb svg { width:20px!important; height:20px!important; }
  .directory-table { border-radius:14px!important; }
  .table-header { display:none!important; }
  .directory-item { display:grid!important; grid-template-columns:minmax(0,1fr) 44px!important; grid-template-rows:auto auto!important; column-gap:8px!important; row-gap:2px!important; padding:10px 12px!important; min-height:68px!important; border-bottom:1px solid var(--border-subtle)!important; border-radius:0!important; }
  .directory-item .item-name { grid-column:1!important; grid-row:1!important; display:flex!important; align-items:center!important; min-width:0!important; overflow:hidden!important; gap:10px!important; }
  .directory-item .item-text { min-width:0!important; overflow:hidden!important; }
  .directory-item .item-title { font-size:13px!important; font-weight:650!important; line-height:1.35!important; display:-webkit-box!important; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden!important; white-space:normal!important; overflow-wrap:anywhere!important; }
  .directory-item .item-size { grid-column:1!important; grid-row:2!important; text-align:left!important; padding-left:46px!important; font-size:11px!important; line-height:1.3!important; }
  .directory-item .item-duration { display:none!important; }
  .directory-item .item-actions { grid-column:2!important; grid-row:1 / 3!important; align-self:center!important; display:flex!important; align-items:center!important; justify-content:center!important; }
  .directory-item .more-btn { width:44px!important; height:44px!important; border-radius:12px!important; background:var(--surface-raised)!important; }
  .directory-item .more-btn svg { width:19px!important; height:19px!important; }
  /* Existing inline action icons are desktop-only; their actions remain in the more menu. */
  .directory-item .fav-btn,
  .directory-item .rename-btn,
  .directory-item .quick-rename,
  .directory-item .quick-action,
  .directory-item .inline-actions,
  .directory-item .item-quick-actions { display:none!important; }
  .directory-item .item-name > :not(.item-icon):not(.item-text) { display:none!important; }
  .directory-item .item-text > :not(.item-title):not(.item-subtitle) { display:none!important; }
  .directory-item .item-icon { flex:0 0 36px!important; width:36px!important; height:36px!important; }
  .directory-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
}